Avatar

1"use client";
2 
3import * as AvatarPrimitive from "@radix-ui/react-avatar";
4import * as React from "react";
5import { cn } from "@/lib/utils";
6import { glass } from "@/lib/glass";
7 
8const Avatar = React.forwardRef<
9  React.ElementRef<typeof AvatarPrimitive.Root>,
10  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
11>(({ className, ...props }, ref) => (
12  <AvatarPrimitive.Root
13    ref={ref}
14    className={cn(
15      "relative inline-flex h-10 w-10 aspect-square shrink-0 overflow-hidden rounded-full",
16      className,
17    )}
18    {...props}
19  />
20));
21Avatar.displayName = AvatarPrimitive.Root.displayName;
22 
23const AvatarImage = React.forwardRef<
24  React.ElementRef<typeof AvatarPrimitive.Image>,
25  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
26>(({ className, ...props }, ref) => (
27  <AvatarPrimitive.Image
28    ref={ref}
29    className={cn("aspect-square h-full w-full object-cover", className)}
30    {...props}
31  />
32));
33AvatarImage.displayName = AvatarPrimitive.Image.displayName;
34 
35const AvatarFallback = React.forwardRef<
36  React.ElementRef<typeof AvatarPrimitive.Fallback>,
37  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
38>(({ className, ...props }, ref) => (
39  <AvatarPrimitive.Fallback
40    ref={ref}
41    className={cn(
42      glass,
43      "flex h-full w-full items-center justify-center rounded-full text-sm font-medium",
44      className,
45    )}
46    {...props}
47  />
48));
49AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
50 
51export { Avatar, AvatarImage, AvatarFallback };