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 { 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'
@ -19,6 +20,7 @@ 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
@ -72,66 +74,82 @@ export const AdvertisementsPage = ({
}, },
} }
const switchView = () => {
setListAdvertisement(!listAdvertisement)
}
return ( return (
<div className="relative"> <div className="relative">
<TitleDashboard title="Advertisement" /> <TitleDashboard title="Advertisement" />
<div className="flex gap-5"> {listAdvertisement && (
<div className="w-[400px] rounded-xl bg-gray-50 py-6"> <div className="flex gap-5">
<Field className="mb-6"> <div className="w-[400px] rounded-xl bg-gray-50 py-6">
<Label className="mb-2 block text-sm font-bold text-gray-700"> <Field className="mb-6">
Banner Design <Label className="mb-2 block text-sm font-bold text-gray-700">
</Label> Banner Design
<Label </Label>
htmlFor="banner-upload" <Label
className="flex cursor-pointer items-center justify-between rounded-lg border-2 border-gray-300 p-3 hover:bg-gray-100 focus:ring-[#5363AB]" 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 className="text-gray-500">
</span> {banner ? banner.name : 'Upload Banner'}
<PlusIcon className="h-4 w-4 text-gray-500" /> </span>
</Label> <PlusIcon className="h-4 w-4 text-gray-500" />
<Input </Label>
id="banner-upload" <Input
type="file" id="banner-upload"
accept="image/*" type="file"
// className="hidden" accept="image/*"
onChange={handleFileChange} // className="hidden"
aria-label="Upload Banner" 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> </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>
)} {banner && (
</div> <div className="h-[100px] w-[200px] shadow-2xl">
<UiTable <div className="mb-4">
data={dataBanner} <img
columns={dataColumns} src={URL.createObjectURL(banner)}
slots={dataSlot} alt="Banner Preview"
title="Daftar Banner" 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> </div>
) )
} }