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

import { Field, Input, Label, Select } from '@headlessui/react'
import { MagnifyingGlassIcon } from '@heroicons/react/20/solid'
import { useState } from 'react'
import { twMerge } from 'tailwind-merge'

import { PlusIcon } from '~/components/icons/plus'
import { Button } from '~/components/ui/button'
import { UiTable } from '~/components/ui/table'
import { TitleDashboard } from '~/components/ui/title-dashboard'
import { BANNER } from '~/data/contents'

type BannerUploadProperties = {
  onBannerChange?: (file: File | undefined) => void
  onLinkChange?: (link: string) => void
}
type TStatusColors = 'draft' | 'active' | 'inactive'

export const AdvertisementsPage = ({
  onBannerChange,
  onLinkChange,
}: BannerUploadProperties) => {
  const [banner, setBanner] = useState<File | null>()
  const [link, setLink] = useState<string>('')
  const [listAdvertisement, setListAdvertisement] = useState(true)

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

  const dataBanner = BANNER
  const dataColumns = [
    { title: 'No', data: 'id' },
    { title: 'Banner', data: 'urlImage' },
    { title: 'Link', data: 'link' },
    { title: 'Tgl Create', data: 'createdAt' },
    { title: 'Status', data: 'status' },
  ]
  const dataSlot = {
    1: (value: string) => {
      return (
        <div>
          <img
            src={value}
            alt={`banner - ${value}`}
            className="aspect-[15/1] h-[50px] max-w-[200px] rounded"
          />
        </div>
      )
    },
    4: (value: string) => {
      const statusColors = {
        draft: 'bg-gray-300',
        active: 'bg-[#04D182]',
        inactive: 'bg-[#F96D19]',
      }
      const status = value as TStatusColors
      return (
        <span
          className={twMerge(
            'rounded-md px-2 py-1 text-sm',
            status ? statusColors[status] : '',
          )}
        >
          {status}
        </span>
      )
    },
  }

  const switchView = () => {
    setListAdvertisement(!listAdvertisement)
  }

  return (
    <div className="relative">
      <TitleDashboard title="Advertisement" />

      {!listAdvertisement && (
        <div className="flex gap-5">
          <div className="w-[400px] rounded-xl bg-gray-50 py-6">
            <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>
          {banner && (
            <div className="h-[100px] w-[200px] shadow-2xl">
              <div className="mb-4">
                <img
                  src={URL.createObjectURL(banner)}
                  alt="Banner Preview"
                  className="h-max-[350px] rasio-15-1 w-full rounded-lg"
                />
              </div>
            </div>
          )}
        </div>
      )}

      {listAdvertisement && (
        <>
          <div className="mb-8 flex items-end justify-between">
            <div className="flex items-center gap-5 rounded-lg bg-gray-50 text-[#363636]">
              <div className="w-[400px]">
                <Field>
                  <Label className="mb-2 block text-sm font-medium">
                    Cari Banner
                  </Label>
                  <div className="relative">
                    <Input
                      type="text"
                      placeholder="Cari Nama"
                      className="w-full rounded-lg bg-white p-2 pr-10 pl-4 shadow focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none"
                    />
                    <div className="absolute inset-y-0 right-0 flex items-center pr-3">
                      <MagnifyingGlassIcon className="h-5 w-5" />
                    </div>
                  </div>
                </Field>
              </div>

              <div className="w-[235px]">
                <Field>
                  <Label className="mb-2 block text-sm font-medium">
                    Status
                  </Label>
                  <Select className="w-full rounded-lg bg-white p-2 shadow focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none">
                    <option>Pilih Status</option>
                    <option>Aktif</option>
                    <option>Nonaktif</option>
                  </Select>
                </Field>
              </div>
            </div>
            <Button
              onClick={switchView}
              className="text-md rounded-md"
              size="lg"
            >
              Create New
            </Button>
          </div>
          <UiTable
            data={dataBanner}
            columns={dataColumns}
            slots={dataSlot}
            title="Daftar Banner"
          />
        </>
      )}
    </div>
  )
}