Avatar

1"use client"
2 
3import * as React from "react"
4import { Avatar as AvatarPrimitive } from "radix-ui"
5 
6import { cn } from "@/lib/utils"
7 
8function Avatar({
9  className,
10  size = "default",
11  ...props
12}: React.ComponentProps<typeof AvatarPrimitive.Root> & {
13  size?: "default" | "sm" | "lg"
14}) {
15  return (
16    <AvatarPrimitive.Root
17      data-slot="avatar"
18      data-size={size}
19      className={cn(
20        "size-8 rounded-full after:rounded-full data-[size=lg]:size-10 data-[size=sm]:size-6 after:border-border group/avatar relative flex shrink-0 select-none after:absolute after:inset-0 after:border after:mix-blend-darken dark:after:mix-blend-lighten",
21        className
22      )}
23      {...props}
24    />
25  )
26}
27 
28function AvatarImage({
29  className,
30  ...props
31}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
32  return (
33    <AvatarPrimitive.Image
34      data-slot="avatar-image"
35      className={cn(
36        "rounded-full aspect-square size-full object-cover",
37        className
38      )}
39      {...props}
40    />
41  )
42}
43 
44function AvatarFallback({
45  className,
46  ...props
47}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
48  return (
49    <AvatarPrimitive.Fallback
50      data-slot="avatar-fallback"
51      className={cn(
52        "bg-muted text-muted-foreground rounded-full flex size-full items-center justify-center text-sm group-data-[size=sm]/avatar:text-xs",
53        className
54      )}
55      {...props}
56    />
57  )
58}
59 
60function AvatarBadge({ className, ...props }: React.ComponentProps<"span">) {
61  return (
62    <span
63      data-slot="avatar-badge"
64      className={cn(
65        "bg-primary text-primary-foreground ring-background absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-blend-color ring-2 select-none",
66        "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden",
67        "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2",
68        "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2",
69        className
70      )}
71      {...props}
72    />
73  )
74}
75 
76function AvatarGroup({ className, ...props }: React.ComponentProps<"div">) {
77  return (
78    <div
79      data-slot="avatar-group"
80      className={cn(
81        "*:data-[slot=avatar]:ring-background group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2",
82        className
83      )}
84      {...props}
85    />
86  )
87}
88 
89function AvatarGroupCount({
90  className,
91  ...props
92// … truncated