Avatar

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