avatar

1"use client"
2 
3import { cn } from "@/lib/utils"
4import * as AvatarPrimitive from "@radix-ui/react-avatar"
5import * as React from "react"
6 
7function Avatar({
8  className,
9  ...props
10}: React.ComponentProps<typeof AvatarPrimitive.Root>) {
11  return (
12    <AvatarPrimitive.Root
13      data-slot="avatar"
14      className={cn(
15        "relative flex size-8 shrink-0 overflow-hidden rounded-full",
16        className,
17      )}
18      {...props}
19    />
20  )
21}
22 
23function AvatarImage({
24  className,
25  ...props
26}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
27  return (
28    <AvatarPrimitive.Image
29      data-slot="avatar-image"
30      className={cn("aspect-square size-full", className)}
31      {...props}
32    />
33  )
34}
35 
36function AvatarFallback({
37  className,
38  ...props
39}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
40  return (
41    <AvatarPrimitive.Fallback
42      data-slot="avatar-fallback"
43      className={cn(
44        "bg-muted flex size-full items-center justify-center rounded-full",
45        className,
46      )}
47      {...props}
48    />
49  )
50}
51 
52export { Avatar, AvatarImage, AvatarFallback }