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 AdminCategoryEdit({ category, parentCategories }: { category: Category; parentCategories: Category[] }) { const { data, setData, post, processing, errors } = useForm({ _method: 'PATCH', name: category.name, parent_id: category.parent_id ? String(category.parent_id) : '', sort_order: String(category.sort_order), status: category.status, description: '', meta_title: '', meta_description: '', image: null as File | null, remove_image: false, }); const [preview, setPreview] = useState( category.image ? `/storage/${category.image}` : null, ); const fileRef = useRef(null); const handleImage = (file: File | null) => { setData('image', file); setData('remove_image', false); setPreview(file ? URL.createObjectURL(file) : null); }; const removeImage = () => { setData('image', null); setData('remove_image', true); setPreview(null); }; const submit: FormEventHandler = (e) => { e.preventDefault(); post(route('admin.categories.update', category.id), { forceFormData: true }); }; return (
Category Details
setData('name', e.target.value)} />
{/* 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)} />
setData('sort_order', e.target.value)} />
setData('status', Boolean(v))} />
); }