Maximilian Liebmann
1d9ab84047
- Updated header component to include notification buttons with icons. - Introduced a new NavUser component for user-related actions in the sidebar. - Added NotificationDot component for visual notification indicators. - Created UserCard component to display user information. - Implemented UserDropdown for user settings and logout functionality. - Added Avatar component for user images with fallback support. - Refactored Sheet and Tooltip components for consistency and improved styling. - Introduced QueryProvider for managing React Query context. - Updated SidebarProvider to use custom sidebar implementation. - Enhanced mobile detection hook for better responsiveness. - Updated dependencies in yarn.lock for new features and fixes. feat: remove dot
51 lines
1.4 KiB
TypeScript
51 lines
1.4 KiB
TypeScript
import { SidebarTrigger } from '@/components/custom-ui/sidebar';
|
|
import { ThemePicker } from '@/components/misc/theme-picker';
|
|
import { NotificationButton } from '@/components/buttons/notification-button';
|
|
|
|
import { BellRing, Inbox } from 'lucide-react';
|
|
import UserDropdown from '@/components/misc/user-dropdown';
|
|
|
|
const items = [
|
|
{
|
|
title: 'Calendar',
|
|
url: '#',
|
|
icon: Inbox,
|
|
},
|
|
{
|
|
title: 'Friends',
|
|
url: '#',
|
|
icon: BellRing,
|
|
},
|
|
];
|
|
|
|
export default function Header({
|
|
children,
|
|
}: Readonly<{
|
|
children: React.ReactNode;
|
|
}>) {
|
|
return (
|
|
<div className='w-full grid grid-rows-[50px_1fr] h-screen'>
|
|
<header className='border-b-1 grid-cols-[1fr_3fr_1fr] grid items-center px-2 shadow-md'>
|
|
<span className='flex justify-start'>
|
|
<SidebarTrigger variant='outline_primary' size='icon' />
|
|
</span>
|
|
<span className='flex justify-center'>Search</span>
|
|
<span className='flex gap-1 justify-end'>
|
|
<ThemePicker />
|
|
{items.map((item) => (
|
|
<NotificationButton
|
|
key={item.title}
|
|
variant='outline_primary'
|
|
dotVariant='hidden'
|
|
size='icon'
|
|
>
|
|
<item.icon />
|
|
</NotificationButton>
|
|
))}
|
|
<UserDropdown />
|
|
</span>
|
|
</header>
|
|
<main>{children}</main>
|
|
</div>
|
|
);
|
|
}
|