Anons79 Mini Shell

import ApplicationLogo from '@/Components/ApplicationLogo';
import { Toaster } from '@/Components/ui/toaster';
import { toast } from '@/hooks/use-toast';
import { PageProps } from '@/types';
import { Link, usePage } from '@inertiajs/react';
import { GraduationCap, Sparkles } from 'lucide-react';
import { PropsWithChildren, useEffect, useState } from 'react';

export default function Guest({ children }: PropsWithChildren) {
    const flash = usePage<PageProps>().props.flash;

    const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);

    useEffect(() => {
        if (flash && flash.success) {
            toast({
                title: 'Success',
                description: flash.success,
            })
        }
        if (flash && flash.error) {
            toast({
                variant: "destructive",
                title: 'Error',
                description: flash.error,
            })
        }
    }, [flash]);
    return (
        <div className="min-h-screen bg-gray-50">

            {/* Header */}
            <header className="border-b bg-white">
                <div className="container mx-auto px-4">
                <div className="flex items-center gap-4 py-4">
                    <GraduationCap className="h-12 w-12" />
                    <div>
                    <h1 className="text-xl font-bold text-gray-900">Talent</h1>
                    <p className="text-sm text-gray-600">Talent Kalimantan Timur</p>
                    </div>
                </div>
                </div>
            </header>

            {/* Navigation */}
            <nav className="bg-[#3F51B5] text-white">
                <div className="container mx-auto px-4">
                <div className="flex items-center justify-between">
                    {/* Mobile Menu Button */}
                    <button 
                    className="md:hidden p-4 focus:outline-none"
                    onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
                    >
                    <svg 
                        className="w-6 h-6" 
                        fill="none" 
                        stroke="currentColor" 
                        viewBox="0 0 24 24"
                    >
                        <path 
                        strokeLinecap="round" 
                        strokeLinejoin="round" 
                        strokeWidth="2" 
                        d="M4 6h16M4 12h16M4 18h16"
                        />
                    </svg>
                    </button>

                    {/* Desktop Navigation */}
                    <div className="hidden md:flex items-center gap-4">
                    <a href={route('welcome')} className="bg-[#303F9F] px-6 py-4 font-medium hover:bg-[#283593] transition">
                        HOME
                    </a>
                    <a href={route('login')} className="px-6 py-4 font-medium hover:bg-[#283593] transition">
                        MASUK
                    </a>
                    <a href={route('course.index')} className="px-6 py-4 font-medium hover:bg-[#283593] transition">
                        PELATIHAN
                    </a>
                    <a href={route('juknis-pelatihan.index')} className="px-6 py-4 font-medium hover:bg-[#283593] transition">
                        JUKNIS PELATIHAN
                    </a>
                    </div>

                    {/* Mobile Navigation */}
                    <div className={`${isMobileMenuOpen ? 'block' : 'hidden'} md:hidden absolute top-16 left-0 right-0 bg-[#3F51B5] z-50`}>
                    <a href={route('welcome')} className="block px-6 py-4 font-medium hover:bg-[#283593] transition">
                        HOME
                    </a>
                    <a href={route('login')} className="block px-6 py-4 font-medium hover:bg-[#283593] transition">
                        MASUK
                    </a>
                    <a href={route('course.index')} className="block px-6 py-4 font-medium hover:bg-[#283593] transition">
                        PELATIHAN
                    </a>
                    <a href={route('juknis-pelatihan.index')} className="block px-6 py-4 font-medium hover:bg-[#283593] transition">
                        JUKNIS PELATIHAN
                    </a>
                    </div>
                </div>
                </div>
            </nav>
            <div className='pt-8 min-h-screen'>
                {children}
                <Toaster />
            </div>

            <footer className="bg-gray-800 text-white py-6">
                <div className="container mx-auto px-4">
                    <div className="flex flex-col items-center justify-between md:flex-row">
                        <div className="text-center md:text-left">
                            <p className="text-sm">&copy; 2025 Talent.</p>
                        </div>
                        <div className="mt-4 md:mt-0">
                            <ul className="flex space-x-4">
                                <li><a href="#" className="text-sm hover:text-gray-400">Kebijakan Privasi</a></li>
                                <li><a href="#" className="text-sm hover:text-gray-400">Pertanyaan</a></li>
                                <li><a href="#" className="text-sm hover:text-gray-400">Kontak</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </footer>
        </div>
    );
}