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
53 lines
1.1 KiB
TypeScript
53 lines
1.1 KiB
TypeScript
'use client';
|
|
|
|
import * as React from 'react';
|
|
import * as AvatarPrimitive from '@radix-ui/react-avatar';
|
|
|
|
import { cn } from '@/lib/utils';
|
|
|
|
function Avatar({
|
|
className,
|
|
...props
|
|
}: React.ComponentProps<typeof AvatarPrimitive.Root>) {
|
|
return (
|
|
<AvatarPrimitive.Root
|
|
data-slot='avatar'
|
|
className={cn(
|
|
'relative flex shrink-0 overflow-hidden rounded-md',
|
|
className,
|
|
)}
|
|
{...props}
|
|
/>
|
|
);
|
|
}
|
|
|
|
function AvatarImage({
|
|
className,
|
|
...props
|
|
}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
|
|
return (
|
|
<AvatarPrimitive.Image
|
|
data-slot='avatar-image'
|
|
className={cn('aspect-square size-full', className)}
|
|
{...props}
|
|
/>
|
|
);
|
|
}
|
|
|
|
function AvatarFallback({
|
|
className,
|
|
...props
|
|
}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
|
|
return (
|
|
<AvatarPrimitive.Fallback
|
|
data-slot='avatar-fallback'
|
|
className={cn(
|
|
'bg-muted flex size-full items-center justify-center rounded-full',
|
|
className,
|
|
)}
|
|
{...props}
|
|
/>
|
|
);
|
|
}
|
|
|
|
export { Avatar, AvatarImage, AvatarFallback };
|