Compare commits

..

No commits in common. "aca894729e47280919b626773c06377b41eb47d0" and "1758b7837ed37acab832f1137680fdff630d23c5" have entirely different histories.

2 changed files with 56 additions and 73 deletions

View File

@ -3,7 +3,6 @@ import { useState } from 'react'
import { twMerge } from 'tailwind-merge' import { twMerge } from 'tailwind-merge'
import { PlusIcon } from '~/components/icons/plus' import { PlusIcon } from '~/components/icons/plus'
import { Button } from '~/components/ui/button'
import { UiTable } from '~/components/ui/table' import { UiTable } from '~/components/ui/table'
import { TitleDashboard } from '~/components/ui/title-dashboard' import { TitleDashboard } from '~/components/ui/title-dashboard'
import { BANNER } from '~/data/contents' import { BANNER } from '~/data/contents'
@ -20,7 +19,6 @@ export const AdvertisementsPage = ({
}: BannerUploadProperties) => { }: BannerUploadProperties) => {
const [banner, setBanner] = useState<File | null>() const [banner, setBanner] = useState<File | null>()
const [link, setLink] = useState<string>('') const [link, setLink] = useState<string>('')
const [listAdvertisement, setListAdvertisement] = useState(true)
const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => { const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
const file = event.target.files?.[0] || undefined const file = event.target.files?.[0] || undefined
@ -74,82 +72,66 @@ export const AdvertisementsPage = ({
}, },
} }
const switchView = () => {
setListAdvertisement(!listAdvertisement)
}
return ( return (
<div className="relative"> <div className="relative">
<TitleDashboard title="Advertisement" /> <TitleDashboard title="Advertisement" />
{listAdvertisement && ( <div className="flex gap-5">
<div className="flex gap-5"> <div className="w-[400px] rounded-xl bg-gray-50 py-6">
<div className="w-[400px] rounded-xl bg-gray-50 py-6"> <Field className="mb-6">
<Field className="mb-6"> <Label className="mb-2 block text-sm font-bold text-gray-700">
<Label className="mb-2 block text-sm font-bold text-gray-700"> Banner Design
Banner Design </Label>
</Label> <Label
<Label htmlFor="banner-upload"
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]"
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">
<span className="text-gray-500"> {banner ? banner.name : 'Upload Banner'}
{banner ? banner.name : 'Upload Banner'} </span>
</span> <PlusIcon className="h-4 w-4 text-gray-500" />
<PlusIcon className="h-4 w-4 text-gray-500" /> </Label>
</Label> <Input
<Input id="banner-upload"
id="banner-upload" type="file"
type="file" accept="image/*"
accept="image/*" // className="hidden"
// className="hidden" onChange={handleFileChange}
onChange={handleFileChange} aria-label="Upload Banner"
aria-label="Upload Banner" />
/> </Field>
</Field>
<Field> <Field>
<Label className="mb-2 block text-sm font-bold text-gray-700"> <Label className="mb-2 block text-sm font-bold text-gray-700">
Link Banner Link Banner
</Label> </Label>
<Input <Input
type="text" type="text"
placeholder="Link Banner" 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" 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} value={link}
onChange={handleLinkChange} onChange={handleLinkChange}
aria-label="Link Banner" aria-label="Link Banner"
/> />
</Field> </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>
)}
<Button
size="lg"
className="mt-6 ml-auto flex-none rounded"
onClick={switchView}
>
List Advertisement
</Button>
</div> </div>
)} {banner && (
<div className="h-[100px] w-[200px] shadow-2xl">
{!listAdvertisement && ( <div className="mb-4">
<UiTable <img
data={dataBanner} src={URL.createObjectURL(banner)}
columns={dataColumns} alt="Banner Preview"
slots={dataSlot} className="h-max-[350px] rasio-15-1 w-full rounded-lg"
title="Daftar Banner" />
/> </div>
)} </div>
)}
</div>
<UiTable
data={dataBanner}
columns={dataColumns}
slots={dataSlot}
title="Daftar Banner"
/>
</div> </div>
) )
} }

View File

@ -52,6 +52,7 @@ export const ContentsPage = () => {
searching: true, searching: true,
ordering: true, ordering: true,
info: true, info: true,
// scrollY: '50vh',
} }
return ( return (