feat: add banner upload functionality with preview and link input

2025-02-26 13:52:47 +07:00
parent bd3ee8db53
commit 7218c7036b
2 changed files with 96 additions and 4 deletions
@@ -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>
  )
 }