Avatar

1"use client";
2 
3import { Avatar as AvatarPrimitive } from "radix-ui";
4import type * as React from "react";
5 
6import { cn } from "@/lib/utils";
7 
8function Avatar({
9  className,
10  size = "default",
11  glow,
12  ...props
13}: React.ComponentProps<typeof AvatarPrimitive.Root> & {
14  size?: "default" | "sm" | "lg";
15  /** Themed ring + halo (folded from the glass wrapper). */
16  glow?: boolean;
17}) {
18  return (
19    <AvatarPrimitive.Root
20      data-slot="avatar"
21      data-size={size}
22      className={cn(
23        "group/avatar relative flex size-10 shrink-0 overflow-hidden rounded-full select-none [outline:1px_solid_oklch(0%_0_0_/_0.1)] [outline-offset:-1px] dark:[outline:1px_solid_oklch(100%_0_0_/_0.1)] data-[size=lg]:size-12 data-[size=sm]:size-8",
24        glow && "ring-2 ring-(color:--glass-glow) shadow-lg shadow-(color:--glass-glow) transition duration-200",
25        className,
26      )}
27      {...props}
28    />
29  );
30}
31 
32function AvatarImage({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Image>) {
33  return <AvatarPrimitive.Image data-slot="avatar-image" className={cn("aspect-square size-full", className)} {...props} />;
34}
35 
36function AvatarFallback({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
37  return (
38    <AvatarPrimitive.Fallback
39      data-slot="avatar-fallback"
40      className={cn(
41        "flex size-full items-center justify-center rounded-full glass glass-border text-sm text-foreground group-data-[size=sm]/avatar:text-xs",
42        className,
43      )}
44      {...props}
45    />
46  );
47}
48 
49function AvatarBadge({ className, ...props }: React.ComponentProps<"span">) {
50  return (
51    <span
52      data-slot="avatar-badge"
53      className={cn(
54        "absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground ring-2 ring-background select-none",
55        "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden",
56        "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2",
57        "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2",
58        className,
59      )}
60      {...props}
61    />
62  );
63}
64 
65function AvatarGroup({ className, ...props }: React.ComponentProps<"div">) {
66  return (
67    <div
68      data-slot="avatar-group"
69      className={cn("group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background", className)}
70      {...props}
71    />
72  );
73// … truncated