avatar

1"use client"
2 
3import * as React from "react"
4 
5import { Avatar as AvatarPrimitive } from "@ark-ui/react/avatar"
6 
7import { cn } from "@/lib/utils"
8 
9const Avatar = React.forwardRef<
10  React.ElementRef<typeof AvatarPrimitive.Root>,
11  AvatarPrimitive.RootProps
12>(({ className, ...props }, ref) => (
13  <AvatarPrimitive.Root
14    ref={ref}
15    className={cn(
16      "relative flex size-8 shrink-0 overflow-hidden rounded-full",
17      className
18    )}
19    {...props}
20  />
21))
22Avatar.displayName = "Avatar"
23 
24const AvatarContext = AvatarPrimitive.Context
25 
26const AvatarFallback = React.forwardRef<
27  React.ElementRef<typeof AvatarPrimitive.Fallback>,
28  AvatarPrimitive.FallbackProps
29>(({ className, ...props }, ref) => (
30  <AvatarPrimitive.Fallback
31    ref={ref}
32    className={cn(
33      "flex size-full items-center justify-center rounded-[inherit] bg-secondary text-xs",
34      className
35    )}
36    {...props}
37  />
38))
39AvatarFallback.displayName = "AvatarFallback"
40 
41const AvatarImage = React.forwardRef<
42  React.ElementRef<typeof AvatarPrimitive.Image>,
43  AvatarPrimitive.ImageProps
44>(({ className, ...props }, ref) => (
45  <AvatarPrimitive.Image
46    ref={ref}
47    className={cn("aspect-square size-full", className)}
48    {...props}
49  />
50))
51AvatarImage.displayName = "AvatarImage"
52 
53export { Avatar, AvatarContext, AvatarFallback, AvatarImage }