73 lines
3.1 KiB
TypeScript
73 lines
3.1 KiB
TypeScript
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>
|
|
);
|
|
};
|