feat: add banner upload functionality with preview and link input

app/components/icons/plus.tsx

@@ -0,0 +1,20 @@
+import type { JSX, SVGProps } from 'react'
+export const PlusIcon = (
+  properties: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,
+) => {
+  return (
+    <svg
+      width={14}
+      height={14}
+      viewBox="0 0 14 14"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...properties}
+    >
+      <path
+        d="M6 8H1a.965.965 0 01-.712-.288A.972.972 0 010 7c0-.283.095-.52.288-.712A.97.97 0 011 6h5V1c0-.283.096-.52.288-.712A.972.972 0 017 0c.283 0 .52.095.713.288A.96.96 0 018 1v5h5c.283 0 .521.096.713.288.192.192.288.43.287.712 0 .283-.097.52-.288.713A.957.957 0 0113 8H8v5a.968.968 0 01-.288.713A.964.964 0 017 14a.973.973 0 01-.712-.288A.965.965 0 016 13V8z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}

app/pages/dashboard-advertisements/index.tsx

@@ -1,9 +1,81 @@
-import { TitleDashboard } from '~/components/ui/title-dashboard'
+import { Field, Input, Label } from '@headlessui/react'
+import { useState } from 'react'
+
+import { PlusIcon } from '~/components/icons/plus'
+
+type BannerUploadProperties = {
+  onBannerChange?: (file: File | undefined) => void
+  onLinkChange?: (link: string) => void
+}
+
+export const AdvertisementsPage = ({
+  onBannerChange,
+  onLinkChange,
+}: BannerUploadProperties) => {
+  const [banner, setBanner] = useState<File | null>()
+  const [link, setLink] = useState<string>('')
+
+  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0] || undefined
+    setBanner(file)
+    onBannerChange?.(file)
+  }
+
+  const handleLinkChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const newLink = event.target.value
+    setLink(newLink)
+    onLinkChange?.(newLink)
+  }
 
-export const AdvertisementsPage = () => {
   return (
-    <div className="relative">
-      <TitleDashboard title="Advertisement" />
+    <div className="w-[400px] rounded-xl bg-gray-50 p-6">
+      {banner && (
+        <div className="h-[100px] w-[200px]">
+          <div className="mb-4">
+            <img
+              src={URL.createObjectURL(banner)}
+              alt="Banner Preview"
+              className="h-auto w-full rounded-lg"
+            />
+          </div>
+        </div>
+      )}
+      <Field className="mb-6">
+        <Label className="mb-2 block text-sm font-bold text-gray-700">
+          Banner Design
+        </Label>
+        <Label
+          htmlFor="banner-upload"
+          className="flex cursor-pointer items-center justify-between rounded-lg border-2 border-gray-300 p-3 hover:bg-gray-100 focus:ring-[#5363AB]"
+        >
+          <span className="text-gray-500">
+            {banner ? banner.name : 'Upload Banner'}
+          </span>
+          <PlusIcon className="h-4 w-4 text-gray-500" />
+        </Label>
+        <Input
+          id="banner-upload"
+          type="file"
+          accept="image/*"
+          // className="hidden"
+          onChange={handleFileChange}
+          aria-label="Upload Banner"
+        />
+      </Field>
+
+      <Field>
+        <Label className="mb-2 block text-sm font-bold text-gray-700">
+          Link Banner
+        </Label>
+        <Input
+          type="text"
+          placeholder="Link Banner"
+          className="w-full rounded-lg border-2 border-gray-300 p-3 hover:bg-gray-100 focus:ring-2 focus:ring-[#5363AB] focus:outline-none"
+          value={link}
+          onChange={handleLinkChange}
+          aria-label="Link Banner"
+        />
+      </Field>
     </div>
   )
 }