Avatar

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