75 lines
2.5 KiB
TypeScript
75 lines
2.5 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { useAuth } from "@/lib/auth";
|
|
import { Button } from "@/components/ui/button";
|
|
import { BookOpen, LayoutDashboard, LogOut, LogIn } from "lucide-react";
|
|
import { useRouter } from "next/navigation";
|
|
import { toast } from "sonner";
|
|
|
|
export function Navbar() {
|
|
const { currentUser, logout } = useAuth();
|
|
const router = useRouter();
|
|
|
|
const handleLogout = async () => {
|
|
await logout();
|
|
toast.success("Logged out successfully");
|
|
router.push("/");
|
|
router.refresh();
|
|
};
|
|
|
|
return (
|
|
<header className="sticky top-0 z-50 border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
|
|
<div className="mx-auto flex h-14 max-w-7xl items-center justify-between px-4 sm:px-6 lg:px-8">
|
|
{/* Logo */}
|
|
<Link
|
|
href="/"
|
|
className="flex items-center gap-2 font-semibold text-foreground hover:text-primary transition-colors"
|
|
>
|
|
<span className="flex h-8 w-8 items-center justify-center rounded-full bg-primary text-xs font-bold text-primary-foreground">
|
|
DB
|
|
</span>
|
|
<span className="hidden sm:inline">Duc Binh Blog</span>
|
|
</Link>
|
|
|
|
{/* Nav */}
|
|
<nav className="flex items-center gap-2">
|
|
<Button variant="ghost" size="sm" asChild>
|
|
<Link href="/">
|
|
<BookOpen className="h-4 w-4 mr-1" />
|
|
<span className="hidden sm:inline">Home</span>
|
|
</Link>
|
|
</Button>
|
|
|
|
{currentUser ? (
|
|
<>
|
|
<Button variant="ghost" size="sm" asChild>
|
|
<Link href="/dashboard">
|
|
<LayoutDashboard className="h-4 w-4 mr-1" />
|
|
<span className="hidden sm:inline">Dashboard</span>
|
|
</Link>
|
|
</Button>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={handleLogout}
|
|
className="text-destructive hover:text-destructive"
|
|
>
|
|
<LogOut className="h-4 w-4 mr-1" />
|
|
<span className="hidden sm:inline">Logout</span>
|
|
</Button>
|
|
</>
|
|
) : (
|
|
<Button variant="ghost" size="sm" asChild>
|
|
<Link href="/auth">
|
|
<LogIn className="h-4 w-4 mr-1" />
|
|
<span className="hidden sm:inline">Sign In</span>
|
|
</Link>
|
|
</Button>
|
|
)}
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|