Compare commits
No commits in common. "aca894729e47280919b626773c06377b41eb47d0" and "1758b7837ed37acab832f1137680fdff630d23c5" have entirely different histories.
aca894729e
...
1758b7837e
@ -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>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@ -52,6 +52,7 @@ export const ContentsPage = () => {
|
|||||||
searching: true,
|
searching: true,
|
||||||
ordering: true,
|
ordering: true,
|
||||||
info: true,
|
info: true,
|
||||||
|
// scrollY: '50vh',
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user