DocsLog in

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

Viewing files at commit 867f032d6ce0Commit detailsView latest

apps/dashboard/src/components/ui/avatar.tsx 94 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({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Image>) {
27
  return (
28
    <AvatarPrimitive.Image
29
      data-slot="avatar-image"
30
      className={cn('aspect-square size-full', className)}
31
      {...props}
32
    />
33
  );
34
}
35
36
function AvatarFallback({
37
  className,
38
  ...props
39
}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
40
  return (
41
    <AvatarPrimitive.Fallback
42
      data-slot="avatar-fallback"
43
      className={cn(
44
        'flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs',
45
        className,
46
      )}
47
      {...props}
48
    />
49
  );
50
}
51
52
function AvatarBadge({ className, ...props }: React.ComponentProps<'span'>) {
53
  return (
54
    <span
55
      data-slot="avatar-badge"
56
      className={cn(
57
        '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',
58
        'group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden',
59
        'group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2',
60
        'group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2',
61
        className,
62
      )}
63
      {...props}
64
    />
65
  );
66
}
67
68
function AvatarGroup({ className, ...props }: React.ComponentProps<'div'>) {
69
  return (
70
    <div
71
      data-slot="avatar-group"
72
      className={cn(
73
        'group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background',
74
        className,
75
      )}
76
      {...props}
77
    />
78
  );
79
}
80
81
function AvatarGroupCount({ className, ...props }: React.ComponentProps<'div'>) {
82
  return (
83
    <div
84
      data-slot="avatar-group-count"
85
      className={cn(
86
        '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',
87
        className,
88
      )}
89
      {...props}
90
    />
91
  );
92
}
93
94
export { Avatar, AvatarImage, AvatarFallback, AvatarBadge, AvatarGroup, AvatarGroupCount };