79 lines
2.0 KiB
TypeScript
79 lines
2.0 KiB
TypeScript
import type { ConfigColumns } from 'datatables.net-dt'
|
|
import type { DataTableSlots } from 'datatables.net-react'
|
|
import { Link } from 'react-router'
|
|
import { twMerge } from 'tailwind-merge'
|
|
|
|
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 TStatusColors = 'draft' | 'active' | 'inactive'
|
|
|
|
export const AdvertisementsPage = () => {
|
|
const dataBanner = BANNER
|
|
const dataColumns: ConfigColumns[] = [
|
|
{ title: 'No', data: 'id' },
|
|
{ title: 'Banner', data: 'urlImage' },
|
|
{ title: 'Link', data: 'link' },
|
|
{ title: 'Tgl Create', data: 'createdAt' },
|
|
{ title: 'Status', data: 'status' },
|
|
]
|
|
const dataSlot: DataTableSlots = {
|
|
1: (value: string) => {
|
|
return (
|
|
<div>
|
|
<img
|
|
src={value}
|
|
alt={`banner - ${value}`}
|
|
className="aspect-[15/1] h-[50px] max-w-[200px] rounded"
|
|
/>
|
|
</div>
|
|
)
|
|
},
|
|
4: (value: string) => {
|
|
const statusColors = {
|
|
draft: 'bg-gray-300',
|
|
active: 'bg-[#04D182]',
|
|
inactive: 'bg-[#F96D19]',
|
|
}
|
|
const status = value as TStatusColors
|
|
return (
|
|
<span
|
|
className={twMerge(
|
|
'rounded-md px-2 py-1 text-sm',
|
|
status ? statusColors[status] : '',
|
|
)}
|
|
>
|
|
{status}
|
|
</span>
|
|
)
|
|
},
|
|
}
|
|
|
|
return (
|
|
<div className="relative">
|
|
<TitleDashboard title="Banner Iklan" />
|
|
|
|
<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>
|
|
|
|
<UiTable
|
|
data={dataBanner}
|
|
columns={dataColumns}
|
|
slots={dataSlot}
|
|
title="Daftar Banner Iklan"
|
|
/>
|
|
</div>
|
|
)
|
|
}
|