import { Head, useForm } from '@inertiajs/react'; import { Image, Upload, X } from 'lucide-react'; import { FormEventHandler, useRef, useState } from 'react'; import InputError from '@/components/input-error'; import { Button } from '@/components/ui/button'; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { Checkbox } from '@/components/ui/checkbox'; import { Input } from '@/components/ui/input'; import { Label } from '@/components/ui/label'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; import AdminLayout from '@/layouts/admin-layout'; import { type Banner } from '@/types'; const POSITIONS = [ { value: 'hero', label: 'Hero (Main Slider)' }, { value: 'promo', label: 'Promo Banner' }, { value: 'sidebar', label: 'Sidebar' }, { value: 'footer', label: 'Footer' }, ]; export default function AdminBannerEdit({ banner }: { banner: Banner }) { const { data, setData, post, processing, errors } = useForm<{ _method: string; title: string; image: File | null; link: string; position: string; sort_order: number; status: boolean; }>({ _method: 'put', title: banner.title ?? '', image: null, link: banner.link ?? '', position: banner.position, sort_order: banner.sort_order, status: banner.status, }); const fileRef = useRef(null); const [preview, setPreview] = useState(null); const handleImageChange = (e: React.ChangeEvent) => { const file = e.target.files?.[0]; if (file) { setData('image', file); setPreview(URL.createObjectURL(file)); } }; const removeNewImage = () => { setData('image', null); setPreview(null); if (fileRef.current) fileRef.current.value = ''; }; const submit: FormEventHandler = (e) => { e.preventDefault(); post(route('admin.banners.update', banner.id)); }; return (
Edit Banner {/* Current / New Image */}
{/* Current image */} {!preview && banner.image && (
Current banner

Current image — upload a new one to replace it

)} {/* New preview */} {preview && (
New preview

New image selected

)} {/* Upload trigger */}
{/* Title */}
setData('title', e.target.value)} placeholder="Banner headline text" className="dark:border-slate-600 dark:bg-slate-700" />
{/* Link */}
setData('link', e.target.value)} placeholder="https://example.com or /products" className="dark:border-slate-600 dark:bg-slate-700" />
{/* Position + Sort */}
setData('sort_order', Number(e.target.value))} className="dark:border-slate-600 dark:bg-slate-700" />
{/* Status */}
setData('status', Boolean(v))} />

Show this banner on the website
Cancel
); }