feat: update AdvertisementsPage to use new icon and localized title, remove unused banner upload
This commit is contained in:
Ardeman
@@ -1,42 +1,16 @@
|
||||
import { Field, Input, Label, Select } from '@headlessui/react'
|
||||
import { MagnifyingGlassIcon } from '@heroicons/react/20/solid'
|
||||
import type { ConfigColumns } from 'datatables.net-dt'
|
||||
import type { DataTableSlots } from 'datatables.net-react'
|
||||
import { useState } from 'react'
|
||||
import { Link } from 'react-router'
|
||||
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)
|
||||
}
|
||||
|
||||
export const AdvertisementsPage = () => {
|
||||
const dataBanner = BANNER
|
||||
const dataColumns: ConfigColumns[] = [
|
||||
{ title: 'No', data: 'id' },
|
||||
@@ -77,119 +51,28 @@ export const AdvertisementsPage = ({
|
||||
},
|
||||
}
|
||||
|
||||
const switchView = () => {
|
||||
setListAdvertisement(!listAdvertisement)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="relative">
|
||||
<TitleDashboard title="Advertisement" />
|
||||
<TitleDashboard title="Banner Iklan" />
|
||||
|
||||
{!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>
|
||||
<div className="mb-8 flex items-end justify-between gap-5">
|
||||
<div className="flex-1">{/* TODO: Filter */}</div>
|
||||
<Button
|
||||
as={Link}
|
||||
to="/lg-admin/advertisements/create"
|
||||
className="text-md h-[42px] rounded-md"
|
||||
size="lg"
|
||||
>
|
||||
Buat Banner Iklan
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<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"
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
<UiTable
|
||||
data={dataBanner}
|
||||
columns={dataColumns}
|
||||
slots={dataSlot}
|
||||
title="Daftar Banner Iklan"
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user