import AdminLayout from '@/Layouts/AdminLayout'; import { Head, useForm, router } from '@inertiajs/react'; import { Plus, Trash2, Edit2, Folder, Check } from 'lucide-react'; import { useState } from 'react'; interface Category { id: number; name: string; slug: string; posts_count: number; } export default function Index({ categories }: { categories: Category[] }) { const [editing, setEditing] = useState(null); const { data, setData, post, put, processing, errors, reset } = useForm({ name: '', }); const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); if (editing) { put(route('admin.categories.update', editing.id), { onSuccess: () => { setEditing(null); reset(); } }); } else { post(route('admin.categories.store'), { onSuccess: () => reset() }); } }; const handleEdit = (category: Category) => { setEditing(category); setData('name', category.name); }; const handleDelete = (id: number) => { if (confirm('Delete this category? This will fail if it has active posts.')) { router.delete(route('admin.categories.destroy', id)); } }; return (

Blog Categories

Organize your insights for better discoverability.

{/* Form */}

{editing ? : } {editing ? 'Edit Category' : 'New Category'}

setData('name', e.target.value)} className="w-full h-12 rounded-xl border border-[#E8E6DF] bg-[#FAFAF8] px-5 text-[14px] font-medium outline-none focus:border-primary/50 transition-all placeholder:text-[#C0BDBA]" placeholder="e.g. Growth Marketing" /> {errors.name &&

{errors.name}

}
{editing && ( )}
{/* List */}
{/* Mobile View */}
{categories.length > 0 ? categories.map((cat) => (

{cat.name}

{cat.posts_count} Articles

)) : (
No categories yet.
)}
{/* Desktop View */}
{categories.length > 0 ? categories.map((cat) => ( )) : ( )}
Category Articles Actions

{cat.name}

{cat.slug}

 {cat.posts_count} Posts
No categories yet. Add one to get started.
); }