feat: update AdvertisementsPage to use new icon and localized title, remove unused banner upload
This commit is contained in:
Ardeman
parent
b9fb1112ae
commit
c5b611a300
@ -1,21 +0,0 @@
|
||||
import type { JSX, SVGProps } from 'react'
|
||||
|
||||
export const MedicalNotesIcon = (
|
||||
properties: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,
|
||||
) => {
|
||||
return (
|
||||
<svg
|
||||
width={12}
|
||||
height={16}
|
||||
viewBox="0 0 12 16"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...properties}
|
||||
>
|
||||
<path
|
||||
d="M9.844 1.985H7.5C7.5.951 6.66.11 5.625.11 4.591.11 3.75.951 3.75 1.985H1.406C.63 1.985 0 2.615 0 3.392v10.312c0 .776.63 1.406 1.406 1.406h8.438c.776 0 1.406-.63 1.406-1.406V3.392c0-.777-.63-1.407-1.406-1.407zm-4.219-.703c.39 0 .703.314.703.703 0 .39-.313.703-.703.703a.701.701 0 01-.703-.703c0-.39.313-.703.703-.703zm2.813 8.906a.235.235 0 01-.235.235h-1.64v1.64a.235.235 0 01-.235.235H4.922a.235.235 0 01-.234-.235v-1.64H3.046a.235.235 0 01-.235-.235V8.782c0-.129.106-.234.235-.234h1.64v-1.64c0-.13.106-.235.235-.235h1.406c.129 0 .234.105.234.234v1.64h1.641c.129 0 .235.106.235.235v1.406zm0-5.625a.235.235 0 01-.235.235H3.047a.235.235 0 01-.235-.235v-.468c0-.13.106-.235.235-.235h5.156c.129 0 .235.106.235.235v.468z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
@ -1,20 +0,0 @@
|
||||
import type { JSX, SVGProps } from 'react'
|
||||
export const PlusIcon = (
|
||||
properties: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,
|
||||
) => {
|
||||
return (
|
||||
<svg
|
||||
width={14}
|
||||
height={14}
|
||||
viewBox="0 0 14 14"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...properties}
|
||||
>
|
||||
<path
|
||||
d="M6 8H1a.965.965 0 01-.712-.288A.972.972 0 010 7c0-.283.095-.52.288-.712A.97.97 0 011 6h5V1c0-.283.096-.52.288-.712A.972.972 0 017 0c.283 0 .52.095.713.288A.96.96 0 018 1v5h5c.283 0 .521.096.713.288.192.192.288.43.287.712 0 .283-.097.52-.288.713A.957.957 0 0113 8H8v5a.968.968 0 01-.288.713A.964.964 0 017 14a.973.973 0 01-.712-.288A.965.965 0 016 13V8z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
@ -1,6 +1,7 @@
|
||||
import {
|
||||
ClipboardDocumentCheckIcon,
|
||||
DocumentCurrencyDollarIcon,
|
||||
MegaphoneIcon,
|
||||
TagIcon,
|
||||
} from '@heroicons/react/20/solid'
|
||||
import type { SVGProps } from 'react'
|
||||
@ -8,7 +9,6 @@ import type { SVGProps } from 'react'
|
||||
import { ChartIcon } from '~/components/icons/chart'
|
||||
import { ChatIcon } from '~/components/icons/chat'
|
||||
import { DocumentIcon } from '~/components/icons/document'
|
||||
import { MedicalNotesIcon } from '~/components/icons/medical-notes'
|
||||
|
||||
type TMenu = {
|
||||
group: string
|
||||
@ -39,9 +39,9 @@ export const MENU: TMenu[] = [
|
||||
icon: ChatIcon,
|
||||
},
|
||||
{
|
||||
title: 'Advertisement',
|
||||
title: 'Banner Iklan',
|
||||
url: '/lg-admin/advertisements',
|
||||
icon: MedicalNotesIcon,
|
||||
icon: MegaphoneIcon,
|
||||
},
|
||||
{
|
||||
title: 'Subscription',
|
||||
|
||||
@ -1,42 +1,16 @@
|
||||
import { Field, Input, Label, Select } from '@headlessui/react'
|
||||
import { MagnifyingGlassIcon } from '@heroicons/react/20/solid'
|
||||
import type { ConfigColumns } from 'datatables.net-dt'
|
||||
import type { DataTableSlots } from 'datatables.net-react'
|
||||
import { useState } from 'react'
|
||||
import { Link } from 'react-router'
|
||||
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'
|
||||
|
||||
type BannerUploadProperties = {
|
||||
onBannerChange?: (file: File | undefined) => void
|
||||
onLinkChange?: (link: string) => void
|
||||
}
|
||||
type TStatusColors = 'draft' | 'active' | 'inactive'
|
||||
|
||||
export const AdvertisementsPage = ({
|
||||
onBannerChange,
|
||||
onLinkChange,
|
||||
}: 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
|
||||
setBanner(file)
|
||||
onBannerChange?.(file)
|
||||
}
|
||||
|
||||
const handleLinkChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const newLink = event.target.value
|
||||
setLink(newLink)
|
||||
onLinkChange?.(newLink)
|
||||
}
|
||||
|
||||
export const AdvertisementsPage = () => {
|
||||
const dataBanner = BANNER
|
||||
const dataColumns: ConfigColumns[] = [
|
||||
{ title: 'No', data: 'id' },
|
||||
@ -77,119 +51,28 @@ export const AdvertisementsPage = ({
|
||||
},
|
||||
}
|
||||
|
||||
const switchView = () => {
|
||||
setListAdvertisement(!listAdvertisement)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="relative">
|
||||
<TitleDashboard title="Advertisement" />
|
||||
<TitleDashboard title="Banner Iklan" />
|
||||
|
||||
{!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"
|
||||
/>
|
||||
</Field>
|
||||
<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>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{listAdvertisement && (
|
||||
<>
|
||||
<div className="mb-8 flex items-end justify-between">
|
||||
<div className="flex items-center gap-5 rounded-lg bg-gray-50 text-[#363636]">
|
||||
<div className="w-[400px]">
|
||||
<Field>
|
||||
<Label className="mb-2 block text-sm font-medium">
|
||||
Cari Banner
|
||||
</Label>
|
||||
<div className="relative">
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="Cari Nama"
|
||||
className="w-full rounded-lg bg-white p-2 pr-10 pl-4 shadow focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none"
|
||||
/>
|
||||
<div className="absolute inset-y-0 right-0 flex items-center pr-3">
|
||||
<MagnifyingGlassIcon className="h-5 w-5" />
|
||||
</div>
|
||||
</div>
|
||||
</Field>
|
||||
</div>
|
||||
|
||||
<div className="w-[235px]">
|
||||
<Field>
|
||||
<Label className="mb-2 block text-sm font-medium">
|
||||
Status
|
||||
</Label>
|
||||
<Select className="w-full rounded-lg bg-white p-2 shadow focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none">
|
||||
<option>Pilih Status</option>
|
||||
<option>Aktif</option>
|
||||
<option>Nonaktif</option>
|
||||
</Select>
|
||||
</Field>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
onClick={switchView}
|
||||
className="text-md rounded-md"
|
||||
size="lg"
|
||||
>
|
||||
Create New
|
||||
</Button>
|
||||
</div>
|
||||
<UiTable
|
||||
data={dataBanner}
|
||||
columns={dataColumns}
|
||||
slots={dataSlot}
|
||||
title="Daftar Banner"
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
<UiTable
|
||||
data={dataBanner}
|
||||
columns={dataColumns}
|
||||
slots={dataSlot}
|
||||
title="Daftar Banner Iklan"
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user