import { Alert, AlertTitle } from '@/components/ui/alert'; import { PlaceholderPattern } from '@/components/ui/placeholder-pattern'; import AppLayout from '@/layouts/app-layout'; import { dashboard } from '@/routes'; import { type BreadcrumbItem } from '@/types'; import { Head, usePage } from '@inertiajs/react'; import { useEffect, useState } from 'react'; const breadcrumbs: BreadcrumbItem[] = [ { title: 'Dashboard', href: dashboard().url, }, ]; export default function Dashboard() { const { flash } = usePage().props as { flash: Record }; // Combine all possible flash messages into one display string const message = flash.success || flash.error || flash.warning || flash.info || flash.message || ""; // Determine alert variant based on message type const variant = flash.success ? "success" : flash.error ? "error" : flash.warning ? "warning" : flash.info ? "info" : "default"; // Local state to control visibility const [visible, setVisible] = useState(!!message); // Hide after 3 seconds (adjust as needed) useEffect(() => { if (message) { setVisible(true); const timer = setTimeout(() => setVisible(false), 5000); return () => clearTimeout(timer); } }, [message]); return ( {/* ✅ Only render alert if visible and message exists */} {visible && message && (
{message}
)}
); }