Avatar

1"use client";
2 
3import * as React from "react";
4import * as AvatarPrimitive from "@radix-ui/react-avatar";
5import { cva, type VariantProps } from "class-variance-authority";
6import { cn } from "@/lib/utils";
7 
8const avatarVariants = cva(
9  "relative flex shrink-0 overflow-hidden border border-glass-border-outer bg-surface shadow-sm",
10  {
11    variants: {
12      size: {
13        xs: "size-6",
14        sm: "size-8",
15        default: "size-10",
16        lg: "size-12",
17        xl: "size-16",
18      },
19      radius: {
20        sm: "rounded-sm",
21        md: "rounded-md",
22        lg: "rounded-lg",
23        full: "rounded-full",
24      },
25    },
26    defaultVariants: { size: "default", radius: "full" },
27  },
28);
29 
30type AvatarProps = React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root> &
31  VariantProps<typeof avatarVariants>;
32 
33const Avatar = React.forwardRef<React.ComponentRef<typeof AvatarPrimitive.Root>, AvatarProps>(
34  ({ className, radius, size, ...props }, ref) => (
35    <AvatarPrimitive.Root
36      ref={ref}
37      data-slot="avatar"
38      data-radius={radius ?? "full"}
39      data-size={size ?? "default"}
40      className={cn(avatarVariants({ radius, size }), className)}
41      {...props}
42    />
43  ),
44);
45Avatar.displayName = AvatarPrimitive.Root.displayName;
46 
47const AvatarImage = React.forwardRef<
48  React.ComponentRef<typeof AvatarPrimitive.Image>,
49  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
50>(({ className, ...props }, ref) => (
51  <AvatarPrimitive.Image
52    ref={ref}
53    data-slot="avatar-image"
54    className={cn("aspect-square h-full w-full object-cover", className)}
55    {...props}
56  />
57));
58AvatarImage.displayName = AvatarPrimitive.Image.displayName;
59 
60const AvatarFallback = React.forwardRef<
61  React.ComponentRef<typeof AvatarPrimitive.Fallback>,
62  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
63>(({ className, ...props }, ref) => (
64  <AvatarPrimitive.Fallback
65    ref={ref}
66    data-slot="avatar-fallback"
67    className={cn(
68      "flex h-full w-full items-center justify-center",
69      "bg-primary-muted text-primary-muted-foreground",
70      "text-xs font-semibold",
71      className,
72    )}
73    {...props}
74  />
75));
76AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
77 
78export { Avatar, AvatarImage, AvatarFallback, avatarVariants };
79export type { AvatarProps };