avatar

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