73 lines
2.4 KiB
TypeScript
73 lines
2.4 KiB
TypeScript
import { ReactNode } from 'react';
|
|
import { Link, useNavigate } from 'react-router-dom';
|
|
import { useAuth } from '@/hooks/useAuth';
|
|
import { useCart } from '@/contexts/CartContext';
|
|
import { Button } from '@/components/ui/button';
|
|
import { ShoppingCart, User, LogOut, Settings } from 'lucide-react';
|
|
|
|
export function Layout({ children }: { children: ReactNode }) {
|
|
const { user, isAdmin, signOut } = useAuth();
|
|
const { items } = useCart();
|
|
const navigate = useNavigate();
|
|
|
|
const handleSignOut = async () => {
|
|
await signOut();
|
|
navigate('/');
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen bg-background">
|
|
<header className="border-b-2 border-border bg-background">
|
|
<div className="container mx-auto px-4 py-4 flex items-center justify-between">
|
|
<Link to="/" className="text-2xl font-bold">
|
|
LearnHub
|
|
</Link>
|
|
|
|
<nav className="flex items-center gap-4">
|
|
<Link to="/products" className="hover:underline font-medium">
|
|
Products
|
|
</Link>
|
|
|
|
{user ? (
|
|
<>
|
|
<Link to="/dashboard" className="hover:underline font-medium">
|
|
Dashboard
|
|
</Link>
|
|
{isAdmin && (
|
|
<Link to="/admin" className="hover:underline font-medium flex items-center gap-1">
|
|
<Settings className="w-4 h-4" />
|
|
Admin
|
|
</Link>
|
|
)}
|
|
<Button variant="ghost" size="sm" onClick={handleSignOut}>
|
|
<LogOut className="w-4 h-4" />
|
|
</Button>
|
|
</>
|
|
) : (
|
|
<Link to="/auth">
|
|
<Button variant="outline" size="sm">
|
|
<User className="w-4 h-4 mr-2" />
|
|
Login
|
|
</Button>
|
|
</Link>
|
|
)}
|
|
|
|
<Link to="/checkout">
|
|
<Button variant="outline" size="sm" className="relative">
|
|
<ShoppingCart className="w-4 h-4" />
|
|
{items.length > 0 && (
|
|
<span className="absolute -top-2 -right-2 bg-primary text-primary-foreground text-xs w-5 h-5 flex items-center justify-center border border-border">
|
|
{items.length}
|
|
</span>
|
|
)}
|
|
</Button>
|
|
</Link>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
|
|
<main>{children}</main>
|
|
</div>
|
|
);
|
|
}
|