import { Head, Link, router, useForm } from '@inertiajs/react'; import { Edit2, Image, Plus, ToggleLeft, ToggleRight, Trash2 } from 'lucide-react'; import { FormEventHandler } from 'react'; import { Button } from '@/components/ui/button'; import { Card, CardContent } from '@/components/ui/card'; import AdminLayout from '@/layouts/admin-layout'; import { type Banner, type PaginatedData } from '@/types'; const POSITION_LABELS: Record = { hero: { label: 'Hero', color: 'bg-indigo-50 text-indigo-700 ring-indigo-200' }, sidebar: { label: 'Sidebar', color: 'bg-sky-50 text-sky-700 ring-sky-200' }, footer: { label: 'Footer', color: 'bg-slate-100 text-slate-600 ring-slate-200' }, promo: { label: 'Promo', color: 'bg-amber-50 text-amber-700 ring-amber-200' }, }; function DeleteForm({ banner }: { banner: Banner }) { const { delete: destroy, processing } = useForm({}); const submit: FormEventHandler = (e) => { e.preventDefault(); if (!confirm(`Delete banner "${banner.title ?? 'Untitled'}"?`)) return; destroy(route('admin.banners.destroy', banner.id)); }; return ( ); } function ToggleForm({ banner }: { banner: Banner }) { const { post, processing } = useForm({}); return ( ); } export default function AdminBannersIndex({ banners }: { banners: PaginatedData }) { return (

Banners & Sliders

{banners.total}

{banners.data.length === 0 ? (

No banners yet

Add a banner to display on the homepage slider

) : (

{banners.data.map((banner) => { const pos = POSITION_LABELS[banner.position] ?? { label: banner.position, color: 'bg-slate-100 text-slate-600 ring-slate-200' }; return (

{/* Image */}

{ (e.target as HTMLImageElement).src = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYwIiBoZWlnaHQ9IjcwIiB2aWV3Qm94PSIwIDAgMTYwIDcwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxyZWN0IHdpZHRoPSIxNjAiIGhlaWdodD0iNzAiIGZpbGw9IiNlMmU4ZjAiLz48dGV4dCB4PSI4MCIgeT0iNDAiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGZpbGw9IiM5NGEzYjgiIGZvbnQtc2l6ZT0iMTIiPk5vIEltYWdlPC90ZXh0Pjwvc3ZnPg=='; }} /> {/* Status badge */}

{banner.status ? 'Active' : 'Inactive'}

{/* Position badge */}

{pos.label}

{/* Info */}

{banner.title || Untitled}

{banner.link && (

{banner.link}

)}

Sort: {banner.sort_order}

{/* Actions */}

); })}

)} {/* Pagination */} {banners.last_page > 1 && (

Showing {banners.from}–{banners.to} of {banners.total}

{banners.links.map((link, i) => (

)} ); }