91 lines
3.4 KiB
TypeScript
91 lines
3.4 KiB
TypeScript
import { useSession } from '@/lib/auth-client';
|
|
import { Separator } from '@base-ui/react/separator';
|
|
import { BellIcon } from '@phosphor-icons/react';
|
|
import { useTranslation } from 'react-i18next';
|
|
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 { t } = useTranslation();
|
|
const { data: session } = useSession();
|
|
|
|
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">
|
|
{t('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>
|
|
{t('ui.view_all_notifications')}
|
|
</DropdownMenuItem>
|
|
</DropdownMenuGroup>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
)}
|
|
</div>
|
|
</header>
|
|
{/* <Link
|
|
to="/demo/start/ssr"
|
|
onClick={() => setIsOpen(false)}
|
|
className="flex-1 flex items-center gap-3 p-3 rounded-lg hover:bg-gray-800 transition-colors mb-2"
|
|
activeProps={{
|
|
className:
|
|
'flex-1 flex items-center gap-3 p-3 rounded-lg bg-cyan-600 hover:bg-cyan-700 transition-colors mb-2',
|
|
}}
|
|
>
|
|
<span className="font-medium">Start - SSR Demos</span>
|
|
</Link> */}
|
|
</>
|
|
);
|
|
}
|