avatar

1"use client"
2 
3import * as React from "react"
4import * as AvatarPrimitive from "@radix-ui/react-avatar"
5 
6import { cn } from "@aomi-labs/react"
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        "group/avatar relative flex size-8 shrink-0 overflow-hidden rounded-full select-none data-[size=lg]:size-10 data-[size=sm]:size-6",
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("aspect-square size-full", className)}
36      {...props}
37    />
38  )
39}
40 
41function AvatarFallback({
42  className,
43  ...props
44}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
45  return (
46    <AvatarPrimitive.Fallback
47      data-slot="avatar-fallback"
48      className={cn(
49        "bg-muted text-muted-foreground flex size-full items-center justify-center rounded-full text-sm group-data-[size=sm]/avatar:text-xs",
50        className
51      )}
52      {...props}
53    />
54  )
55}
56 
57function AvatarBadge({ className, ...props }: React.ComponentProps<"span">) {
58  return (
59    <span
60      data-slot="avatar-badge"
61      className={cn(
62        "bg-primary text-primary-foreground ring-background absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full ring-2 select-none",
63        "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden",
64        "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2",
65        "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2",
66        className
67      )}
68      {...props}
69    />
70  )
71}
72 
73function AvatarGroup({ className, ...props }: React.ComponentProps<"div">) {
74  return (
75    <div
76      data-slot="avatar-group"
77      className={cn(
78        "*:data-[slot=avatar]:ring-background group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2",
79        className
80      )}
81      {...props}
82    />
83  )
84}
85 
86function AvatarGroupCount({
87  className,
88  ...props
89}: React.ComponentProps<"div">) {
90  return (
91    <div
92      data-slot="avatar-group-count"
93      className={cn(
94// … truncated