44 lines
1.7 KiB
TypeScript
44 lines
1.7 KiB
TypeScript
import { Link, useNavigate } from 'react-router-dom';
|
|
import { useAuth } from '@/hooks/useAuth';
|
|
import { Avatar, AvatarFallback } from '@/components/ui/avatar';
|
|
import { LogOut, Plus, Home, User } from 'lucide-react';
|
|
|
|
export default function Navbar() {
|
|
const { user, logout } = useAuth();
|
|
const navigate = useNavigate();
|
|
|
|
if (!user) return null;
|
|
|
|
return (
|
|
<nav className="sticky top-0 z-50 border-b bg-white">
|
|
<div className="mx-auto flex h-12 max-w-5xl items-center justify-between px-4">
|
|
<Link to="/feed" className="text-base font-semibold tracking-tight">
|
|
Catstagram
|
|
</Link>
|
|
|
|
<div className="flex items-center gap-0.5">
|
|
<Link to="/feed" className="flex h-9 w-9 items-center justify-center rounded hover:bg-secondary transition-colors">
|
|
<Home className="h-4 w-4" />
|
|
</Link>
|
|
<Link to="/upload" className="flex h-9 w-9 items-center justify-center rounded hover:bg-secondary transition-colors">
|
|
<Plus className="h-4 w-4" />
|
|
</Link>
|
|
<Link to="/profile" className="flex h-9 w-9 items-center justify-center rounded hover:bg-secondary transition-colors">
|
|
<Avatar className="h-6 w-6">
|
|
<AvatarFallback className="text-[9px] bg-foreground text-background">
|
|
{user.username.charAt(0).toUpperCase()}
|
|
</AvatarFallback>
|
|
</Avatar>
|
|
</Link>
|
|
<button
|
|
onClick={() => { logout(); navigate('/login'); }}
|
|
className="flex h-9 w-9 items-center justify-center rounded text-muted-foreground hover:text-foreground hover:bg-secondary transition-colors"
|
|
>
|
|
<LogOut className="h-4 w-4" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
);
|
|
}
|