first commit

client/src/components/Layout.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import { Link, useLocation, useNavigate, Outlet } from 'react-router-dom';
+import { QrCode, Scan, Calendar, Mail, LogOut } from 'lucide-react';
+import { useAuth } from '../context/AuthContext';
+
+export const Layout: React.FC = () => {
+    const location = useLocation();
+    const navigate = useNavigate();
+    const { logout } = useAuth();
+
+    const isActive = (path: string) => location.pathname === path;
+
+    const handleLogout = () => {
+        logout();
+        navigate('/login');
+    };
+
+    return (
+        <div className="min-h-screen flex flex-col">
+            <nav className="glass-panel sticky top-0 z-50 border-x-0 border-t-0 rounded-none">
+                <div className="container py-4 flex justify-between items-center">
+                    <Link to="/" className="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-indigo-400 to-purple-400 flex items-center gap-2">
+                        <QrCode className="text-indigo-400" />
+                        EventQR
+                    </Link>
+
+                    <div className="flex gap-6 items-center">
+                        <Link
+                            to="/"
+                            className={`flex items-center gap-2 hover:text-indigo-400 transition-colors ${isActive('/') ? 'text-indigo-400' : 'text-slate-400'}`}
+                        >
+                            <Calendar size={20} />
+                            <span className="hidden sm:inline">Events</span>
+                        </Link>
+                        <Link
+                            to="/generate"
+                            className={`flex items-center gap-2 hover:text-indigo-400 transition-colors ${isActive('/generate') ? 'text-indigo-400' : 'text-slate-400'}`}
+                        >
+                            <Mail size={20} />
+                            <span className="hidden sm:inline">Generate</span>
+                        </Link>
+                        <Link
+                            to="/scan"
+                            className={`flex items-center gap-2 hover:text-indigo-400 transition-colors ${isActive('/scan') ? 'text-indigo-400' : 'text-slate-400'}`}
+                        >
+                            <Scan size={20} />
+                            <span className="hidden sm:inline">Scan</span>
+                        </Link>
+
+                        <div className="w-px h-6 bg-slate-700 mx-2"></div>
+
+                        <button
+                            onClick={handleLogout}
+                            className="flex items-center gap-2 text-slate-400 hover:text-red-400 transition-colors"
+                            title="Logout"
+                        >
+                            <LogOut size={20} />
+                        </button>
+                    </div>
+                </div>
+            </nav>
+
+            <main className="flex-1 container py-8 page-transition">
+                <Outlet />
+            </main>
+
+            <footer className="py-6 text-center text-slate-600 text-sm">
+                <p>© 2024 EventQR Tool. Built for seamless event management.</p>
+            </footer>
+        </div>
+    );
+};