Avatar

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