legalgo-FE-reactrouter/app/pages/dashboard-advertisements/index.tsx

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)
  }

  return (
    <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>
  )
}