82 lines
2.4 KiB
TypeScript
82 lines
2.4 KiB
TypeScript
import { Field, Input, Label } from '@headlessui/react'
|
|
import { useState } from 'react'
|
|
|
|
import { PlusIcon } from '~/components/icons/plus'
|
|
|
|
type BannerUploadProperties = {
|
|
onBannerChange?: (file: File | undefined) => void
|
|
onLinkChange?: (link: string) => void
|
|
}
|
|
|
|
export const AdvertisementsPage = ({
|
|
onBannerChange,
|
|
onLinkChange,
|
|
}: BannerUploadProperties) => {
|
|
const [banner, setBanner] = useState<File | null>()
|
|
const [link, setLink] = useState<string>('')
|
|
|
|
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)
|
|
}
|
|
|
|
return (
|
|
<div className="w-[400px] rounded-xl bg-gray-50 p-6">
|
|
{banner && (
|
|
<div className="h-[100px] w-[200px]">
|
|
<div className="mb-4">
|
|
<img
|
|
src={URL.createObjectURL(banner)}
|
|
alt="Banner Preview"
|
|
className="h-auto w-full rounded-lg"
|
|
/>
|
|
</div>
|
|
</div>
|
|
)}
|
|
<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>
|
|
)
|
|
}
|