avatar

1"use client";
2
3import * as AvatarPrimitive from "@radix-ui/react-avatar";
4import * as React from "react";
5
6// Utility function for class name merging
7const cn = (...classes: any[]) => classes.filter(Boolean).join(" ");
8
9const Avatar = React.forwardRef<
10  React.ElementRef<typeof AvatarPrimitive.Root>,
11  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
12>(({ className, ...props }, ref) => (
13  <AvatarPrimitive.Root
14    ref={ref}
15    className={cn(
16      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full outline-2 outline-border",
17      className,
18      "outline"
19    )}
20    {...props}
21  />
22));
23Avatar.displayName = AvatarPrimitive.Root.displayName;
24
25const AvatarImage = React.forwardRef<
26  React.ElementRef<typeof AvatarPrimitive.Image>,
27  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
28>(({ className, ...props }, ref) => (
29  <AvatarPrimitive.Image
30    ref={ref}
31    className={cn("aspect-square h-full w-full", className)}
32    {...props}
33  />
34));
35AvatarImage.displayName = AvatarPrimitive.Image.displayName;
36
37const AvatarFallback = React.forwardRef<
38  React.ElementRef<typeof AvatarPrimitive.Fallback>,
39  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
40>(({ className, ...props }, ref) => (
41  <AvatarPrimitive.Fallback
42    ref={ref}
43    className={cn(
44      "flex h-full w-full items-center justify-center rounded-full bg-bw text-text font-base",
45      className
46    )}
47    {...props}
48  />
49));
50AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
51
52export { Avatar, AvatarFallback, AvatarImage };
53