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({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Root>) { return <AvatarPrimitive.Root data-slot="avatar" className={cn("relative flex size-9 shrink-0 overflow-hidden rounded-xl border border-foreground/10 bg-foreground/[.04] shadow-[inset_0_1px_0_color-mix(in_oklch,var(--background)_60%,transparent),0_8px_20px_-14px_var(--foreground)]", className)} {...props} /> }
9function AvatarImage({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Image>) { return <AvatarPrimitive.Image data-slot="avatar-image" className={cn("aspect-square size-full object-cover", className)} {...props} /> }
10function AvatarFallback({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Fallback>) { return <AvatarPrimitive.Fallback data-slot="avatar-fallback" className={cn("flex size-full items-center justify-center rounded-[inherit] bg-primary/8 text-xs font-semibold tracking-[-0.01em] text-primary", className)} {...props} /> }
11 
12export { Avatar, AvatarFallback, AvatarImage }