src/components/ui/avatar.tsx 1.1 K raw
1
"use client"
2
3
import * as React from "react"
4
import * as AvatarPrimitive from "@radix-ui/react-avatar"
5
6
import { cn } from "@/lib/utils"
7
8
function 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-full",
17
        className
18
      )}
19
      {...props}
20
    />
21
  )
22
}
23
24
function 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
37
function 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-full",
46
        className
47
      )}
48
      {...props}
49
    />
50
  )
51
}
52
53
export { Avatar, AvatarImage, AvatarFallback }