96 lines
3.3 KiB
TypeScript
96 lines
3.3 KiB
TypeScript
'use client';
|
||
|
||
import Link from 'next/link';
|
||
import { Bell, Menu, LogOut, Settings, CreditCard } from 'lucide-react';
|
||
import { Button } from '@/components/ui/button';
|
||
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
|
||
import {
|
||
DropdownMenu,
|
||
DropdownMenuContent,
|
||
DropdownMenuItem,
|
||
DropdownMenuLabel,
|
||
DropdownMenuSeparator,
|
||
DropdownMenuTrigger,
|
||
} from '@/components/ui/dropdown-menu';
|
||
import { useAuth } from '@/contexts/auth-context';
|
||
|
||
export function DashboardHeader() {
|
||
const { user, signOut } = useAuth();
|
||
|
||
const initials = user?.user_metadata?.full_name
|
||
?.split(' ')
|
||
.map((n: string) => n[0])
|
||
.join('')
|
||
.toUpperCase() || user?.email?.[0]?.toUpperCase() || 'U';
|
||
|
||
return (
|
||
<header className="flex h-16 items-center justify-between border-b px-6">
|
||
{/* Mobile menu button */}
|
||
<Button variant="ghost" size="icon" className="lg:hidden">
|
||
<Menu className="h-5 w-5" />
|
||
<span className="sr-only">Открыть меню</span>
|
||
</Button>
|
||
|
||
{/* Spacer */}
|
||
<div className="flex-1" />
|
||
|
||
{/* Right side */}
|
||
<div className="flex items-center gap-4">
|
||
{/* Notifications */}
|
||
<Button variant="ghost" size="icon">
|
||
<Bell className="h-5 w-5" />
|
||
<span className="sr-only">Уведомления</span>
|
||
</Button>
|
||
|
||
{/* User menu */}
|
||
<DropdownMenu>
|
||
<DropdownMenuTrigger asChild>
|
||
<Button variant="ghost" className="relative h-9 w-9 rounded-full">
|
||
<Avatar className="h-9 w-9">
|
||
<AvatarImage
|
||
src={user?.user_metadata?.avatar_url}
|
||
alt={user?.user_metadata?.full_name || 'User'}
|
||
/>
|
||
<AvatarFallback>{initials}</AvatarFallback>
|
||
</Avatar>
|
||
</Button>
|
||
</DropdownMenuTrigger>
|
||
<DropdownMenuContent align="end" className="w-56">
|
||
<DropdownMenuLabel className="font-normal">
|
||
<div className="flex flex-col space-y-1">
|
||
<p className="text-sm font-medium leading-none">
|
||
{user?.user_metadata?.full_name || 'Пользователь'}
|
||
</p>
|
||
<p className="text-xs leading-none text-muted-foreground">
|
||
{user?.email}
|
||
</p>
|
||
</div>
|
||
</DropdownMenuLabel>
|
||
<DropdownMenuSeparator />
|
||
<DropdownMenuItem asChild>
|
||
<Link href="/dashboard/settings" className="cursor-pointer">
|
||
<Settings className="mr-2 h-4 w-4" />
|
||
Настройки
|
||
</Link>
|
||
</DropdownMenuItem>
|
||
<DropdownMenuItem asChild>
|
||
<Link href="/dashboard/billing" className="cursor-pointer">
|
||
<CreditCard className="mr-2 h-4 w-4" />
|
||
Подписка
|
||
</Link>
|
||
</DropdownMenuItem>
|
||
<DropdownMenuSeparator />
|
||
<DropdownMenuItem
|
||
className="text-destructive cursor-pointer"
|
||
onClick={() => signOut()}
|
||
>
|
||
<LogOut className="mr-2 h-4 w-4" />
|
||
Выйти
|
||
</DropdownMenuItem>
|
||
</DropdownMenuContent>
|
||
</DropdownMenu>
|
||
</div>
|
||
</header>
|
||
);
|
||
}
|