79 lines
2.9 KiB
TypeScript
79 lines
2.9 KiB
TypeScript
import { m } from '@/paraglide/messages';
|
|
import { Separator } from '@base-ui/react/separator';
|
|
import { BellIcon } from '@phosphor-icons/react';
|
|
import { useAuth } from './auth/auth-provider';
|
|
import RouterBreadcrumb from './sidebar/RouterBreadcrumb';
|
|
import { Badge } from './ui/badge';
|
|
import { Button } from './ui/button';
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuGroup,
|
|
DropdownMenuItem,
|
|
DropdownMenuLabel,
|
|
DropdownMenuSeparator,
|
|
DropdownMenuTrigger,
|
|
} from './ui/dropdown-menu';
|
|
import { SidebarTrigger } from './ui/sidebar';
|
|
|
|
export default function Header() {
|
|
const { data: session } = useAuth();
|
|
|
|
return (
|
|
<>
|
|
<header className="flex h-(--header-height) sticky top-0 shrink-0 items-center justify-between gap-2 border-b bg-background transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-(--header-height)">
|
|
<div className="flex items-center gap-1 lg:gap-2 px-2">
|
|
<SidebarTrigger size="lg" />
|
|
<Separator
|
|
orientation="vertical"
|
|
className="mx-2 data-[orientation=vertical]:h-4 border"
|
|
/>
|
|
<RouterBreadcrumb />
|
|
</div>
|
|
<div className="flex mr-2">
|
|
{session?.user && (
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button size="lg" variant="ghost" className="relative">
|
|
<BellIcon size={32} />
|
|
{false && (
|
|
<Badge
|
|
variant="destructive"
|
|
className="absolute -top-1 -right-1 h-5 w-5 flex items-center justify-center p-0 text-xs"
|
|
>
|
|
0
|
|
</Badge>
|
|
)}
|
|
<span className="sr-only">Notifications</span>
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent className="w-sm min-w-56 rounded-lg">
|
|
<DropdownMenuLabel className="font-bold text-black">
|
|
{m.ui_label_notifications()}
|
|
</DropdownMenuLabel>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuGroup>
|
|
<DropdownMenuItem>
|
|
<div className="flex flex-col gap-1">
|
|
<p className="text-sm font-medium">System</p>
|
|
<p className="text-xs text-muted-foreground">
|
|
1 hour ago
|
|
</p>
|
|
</div>
|
|
</DropdownMenuItem>
|
|
</DropdownMenuGroup>
|
|
<DropdownMenuGroup>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem>
|
|
{m.ui_view_all_notifications()}
|
|
</DropdownMenuItem>
|
|
</DropdownMenuGroup>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
)}
|
|
</div>
|
|
</header>
|
|
</>
|
|
);
|
|
}
|