Avatar

1"use client";
2
3import { ComponentProps } from "react";
4
5import { Avatar as AvatarPrimitive } from "@base-ui/react/avatar";
6
7import { cn } from "@/lib/utils";
8
9function Avatar({
10  className,
11  size = "default",
12  ...props
13}: AvatarPrimitive.Root.Props & {
14  size?: "default" | "sm" | "lg";
15}) {
16  return (
17    <AvatarPrimitive.Root
18      data-slot="avatar"
19      data-size={size}
20      className={cn(
21        "after:border-border group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten",
22        className
23      )}
24      {...props}
25    />
26  );
27}
28
29function AvatarImage({ className, ...props }: AvatarPrimitive.Image.Props) {
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}: AvatarPrimitive.Fallback.Props) {
46  return (
47    <AvatarPrimitive.Fallback
48      data-slot="avatar-fallback"
49      className={cn(
50        "bg-muted text-muted-foreground flex size-full items-center justify-center rounded-full text-sm group-data-[size=sm]/avatar:text-xs",
51        className
52      )}
53      {...props}
54    />
55  );
56}
57
58function AvatarBadge({ className, ...props }: ComponentProps<"span">) {
59  return (
60    <span
61      data-slot="avatar-badge"
62      className={cn(
63        "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",
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 }: ComponentProps<"div">) {
75  return (
76    <div
77      data-slot="avatar-group"
78      className={cn(
79        "*:data-[slot=avatar]:ring-background group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2",
80        className
81      )}
82      {...props}
83    />
84  );
85}
86
87function AvatarGroupCount({
88  className,
89// … truncated