67 lines
2.3 KiB
TypeScript
67 lines
2.3 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { signOut } from "next-auth/react";
|
|
import { LogOut, Lightbulb, KeyRound } from "lucide-react";
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuSeparator,
|
|
DropdownMenuTrigger,
|
|
} from "@/components/ui/dropdown-menu";
|
|
import { MobileNav } from "@/components/layout/mobile-nav";
|
|
import { initials } from "@/lib/utils";
|
|
|
|
interface TopNavProps {
|
|
user: { name: string; email: string; role: string };
|
|
}
|
|
|
|
export function TopNav({ user }: TopNavProps) {
|
|
return (
|
|
<header className="h-14 border-b flex items-center justify-between px-4 md:px-6 shrink-0 bg-background">
|
|
<div className="flex items-center gap-2">
|
|
<MobileNav />
|
|
<span className="font-display font-semibold md:hidden">Moon Base</span>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-1">
|
|
<Link
|
|
href="/suggestions"
|
|
aria-label="Suggestions & feedback"
|
|
title="Suggestions & feedback"
|
|
className="p-2 rounded-md text-muted-foreground hover:text-foreground hover:bg-accent transition-colors"
|
|
>
|
|
<Lightbulb className="h-5 w-5" />
|
|
</Link>
|
|
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button variant="ghost" size="sm" className="gap-2">
|
|
<div className="h-6 w-6 rounded-full bg-[hsl(var(--leaf))] flex items-center justify-center text-white text-[10px] font-bold">
|
|
{initials(user.name)}
|
|
</div>
|
|
<span className="text-sm hidden sm:inline">{user.name}</span>
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end">
|
|
<div className="px-2 py-1.5 text-xs text-muted-foreground">{user.email}</div>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem asChild>
|
|
<Link href="/change-password">
|
|
<KeyRound className="h-4 w-4 mr-2" />
|
|
Change password
|
|
</Link>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem onClick={() => signOut({ callbackUrl: "/login" })}>
|
|
<LogOut className="h-4 w-4 mr-2" />
|
|
Sign out
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|