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'; const POSITIONS = [ { value: 'hero', label: 'Hero (Main Slider)' }, { value: 'promo', label: 'Promo Banner' }, { value: 'sidebar', label: 'Sidebar' }, { value: 'footer', label: 'Footer' }, ]; export default function AdminBannerCreate() { const { data, setData, post, processing, errors } = useForm<{ title: string; image: File | null; link: string; position: string; sort_order: number; status: boolean; }>({ title: '', image: null, link: '', position: 'hero', sort_order: 0, status: true, }); 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 removeImage = () => { setData('image', null); setPreview(null); if (fileRef.current) fileRef.current.value = ''; }; const submit: FormEventHandler = (e) => { e.preventDefault(); post(route('admin.banners.store')); }; return (
Banner Details {/* Image Upload */}
{preview ? (
Preview
) : ( )}
{/* 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
); }