DocsLog in

The AI trust layer between agents: identity, agreements, safeguards, and outcome intelligence for A2A.

Viewing files at commit e9e4992bde95Commit detailsView latest

apps/dashboard/src/components/ui/avatar.tsx 107 lines · 2.8 KB · tsx
1
import * as React from "react"
2
import { Avatar as AvatarPrimitive } from "radix-ui"
3
4
import { cn } from "@/lib/utils"
5
6
function 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 overflow-hidden rounded-full select-none data-[size=lg]:size-10 data-[size=sm]:size-6",
19
        className
20
      )}
21
      {...props}
22
    />
23
  )
24
}
25
26
function AvatarImage({
27
  className,
28
  ...props
29
}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
30
  return (
31
    <AvatarPrimitive.Image
32
      data-slot="avatar-image"
33
      className={cn("aspect-square size-full", className)}
34
      {...props}
35
    />
36
  )
37
}
38
39
function AvatarFallback({
40
  className,
41
  ...props
42
}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
43
  return (
44
    <AvatarPrimitive.Fallback
45
      data-slot="avatar-fallback"
46
      className={cn(
47
        "flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs",
48
        className
49
      )}
50
      {...props}
51
    />
52
  )
53
}
54
55
function AvatarBadge({ className, ...props }: React.ComponentProps<"span">) {
56
  return (
57
    <span
58
      data-slot="avatar-badge"
59
      className={cn(
60
        "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",
61
        "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden",
62
        "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2",
63
        "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2",
64
        className
65
      )}
66
      {...props}
67
    />
68
  )
69
}
70
71
function AvatarGroup({ className, ...props }: React.ComponentProps<"div">) {
72
  return (
73
    <div
74
      data-slot="avatar-group"
75
      className={cn(
76
        "group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background",
77
        className
78
      )}
79
      {...props}
80
    />
81
  )
82
}
83
84
function AvatarGroupCount({
85
  className,
86
  ...props
87
}: React.ComponentProps<"div">) {
88
  return (
89
    <div
90
      data-slot="avatar-group-count"
91
      className={cn(
92
        "relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",
93
        className
94
      )}
95
      {...props}
96
    />
97
  )
98
}
99
100
export {
101
  Avatar,
102
  AvatarImage,
103
  AvatarFallback,
104
  AvatarBadge,
105
  AvatarGroup,
106
  AvatarGroupCount,
107
}