Glass Avatar

1'use client';
2 
3import * as React from 'react';
4import { Avatar as AvatarPrimitive } from 'radix-ui';
5 
6import { cn } from '@/lib/utils';
7 
8const GlassAvatar = React.forwardRef<
9  React.ComponentRef<typeof AvatarPrimitive.Root>,
10  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
11>(({ className, ...props }, ref) => (
12  <AvatarPrimitive.Root
13    ref={ref}
14    className={cn(
15      'relative flex size-10 shrink-0 overflow-hidden rounded-full border border-glass-edge bg-glass backdrop-blur',
16      className,
17    )}
18    {...props}
19  />
20));
21GlassAvatar.displayName = AvatarPrimitive.Root.displayName;
22 
23const GlassAvatarImage = React.forwardRef<
24  React.ComponentRef<typeof AvatarPrimitive.Image>,
25  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
26>(({ className, ...props }, ref) => (
27  <AvatarPrimitive.Image ref={ref} className={cn('aspect-square size-full object-cover', className)} {...props} />
28));
29GlassAvatarImage.displayName = AvatarPrimitive.Image.displayName;
30 
31const GlassAvatarFallback = React.forwardRef<
32  React.ComponentRef<typeof AvatarPrimitive.Fallback>,
33  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
34>(({ className, ...props }, ref) => (
35  <AvatarPrimitive.Fallback
36    ref={ref}
37    className={cn(
38      'flex size-full items-center justify-center font-mono text-[0.75rem] uppercase text-muted-foreground',
39      className,
40    )}
41    {...props}
42  />
43));
44GlassAvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
45 
46export { GlassAvatar, GlassAvatarImage, GlassAvatarFallback };