legalgonews/legalgo-FE-reactrouter
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: add toggle functionality for advertisement view and integrate button for switching

Browse Source
This commit is contained in:
fredy.siswanto 2025-03-04 22:04:07 +07:00
parent 1758b7837e
commit d6768f0318
1 changed files with 73 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

128
app/pages/dashboard-advertisements/index.tsx
View File

@ -3,6 +3,7 @@ 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'
@ -19,6 +20,7 @@ export const AdvertisementsPage = ({
}: 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
@ -72,66 +74,82 @@ export const AdvertisementsPage = ({
},
}
const switchView = () => {
setListAdvertisement(!listAdvertisement)
}
return (
<div className="relative">
<TitleDashboard title="Advertisement" />
<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"
{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"
/>
</div>
</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>
)}
</div>
<UiTable
data={dataBanner}
columns={dataColumns}
slots={dataSlot}
title="Daftar Banner"
/>
{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>
)}
{!listAdvertisement && (
<UiTable
data={dataBanner}
columns={dataColumns}
slots={dataSlot}
title="Daftar Banner"
/>
)}
</div>
)
}