import { Head, useForm } from '@inertiajs/react'; import { ImagePlus, 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 Category } from '@/types'; export default function AdminCategoryCreate({ parentCategories }: { parentCategories: Category[] }) { const { data, setData, post, processing, errors } = useForm({ name: '', parent_id: '', sort_order: '0', status: true, description: '', meta_title: '', meta_description: '', image: null as File | null, }); const [preview, setPreview] = useState(null); const fileRef = useRef(null); const handleImage = (file: File | null) => { setData('image', file); setPreview(file ? URL.createObjectURL(file) : null); }; const submit: FormEventHandler = (e) => { e.preventDefault(); post(route('admin.categories.store'), { forceFormData: true }); }; return (

Category Details

Name * setData('name', e.target.value)} placeholder="Category name" />

Parent Category

{/* Image upload */}

Category Image {preview ? (

) : (

fileRef.current?.click()} className="flex h-28 w-28 cursor-pointer flex-col items-center justify-center gap-1 rounded-xl border-2 border-dashed border-slate-300 text-slate-400 hover:border-indigo-400 hover:bg-indigo-50/30" > Add image

)} handleImage(e.target.files?.[0] ?? null)} />

Sort Order setData('sort_order', e.target.value)} />

Description