Avatar

1'use client';
2
3import { Avatar } from '@/components/ui/avatar';
4
5export function Default() {
6  return (
7    <div className="flex items-center gap-3">
8      <Avatar>
9        <Avatar.Image src="https://github.com/figueroaignacio.png" alt="Ignacio Figueroa" />
10        <Avatar.Fallback>IF</Avatar.Fallback>
11      </Avatar>
12      <div>
13        <p className="text-sm font-medium">Ignacio Figueroa</p>
14        <p className="text-muted-foreground text-xs">Signed in as owner</p>
15      </div>
16    </div>
17  );
18}

1'use client';
2
3import { Avatar } from '@/components/ui/avatar';
4
5export function Default() {
6  return (
7    <div className="flex items-center gap-3">
8      <Avatar>
9        <Avatar.Image src="https://github.com/figueroaignacio.png" alt="Ignacio Figueroa" />
10        <Avatar.Fallback>IF</Avatar.Fallback>
11      </Avatar>
12      <div>
13        <p className="text-sm font-medium">Ignacio Figueroa</p>
14        <p className="text-muted-foreground text-xs">Signed in as owner</p>
15      </div>
16    </div>
17  );
18}

1'use client';
2
3import { Avatar } from '@/components/ui/avatar';
4
5const rows = [
6  {
7    size: 'sm' as const,
8    src: 'https://github.com/nicvazquezdev.png',
9    name: 'Nicolas Vazquez',
10    detail: 'commented on checkout-flow, 2m ago',
11  },
12  {
13    size: 'md' as const,
14    src: 'https://github.com/ManuZarraga.png',
15    name: 'Manuel Zarraga',
16    detail: 'Engineering, joined Feb 2024',
17  },
18  {
19    size: 'lg' as const,
20    src: 'https://github.com/figueroaignacio.png',
21    name: 'Ignacio Figueroa',
22    detail: 'Workspace owner, acmestudio.dev',
23  },
24];
25
26export function Sizes() {
27  return (
28    <div className="flex w-full max-w-sm flex-col gap-5">
29      {rows.map((row) => (
30        <div key={row.size} className="flex items-center gap-3">
31          <Avatar size={row.size}>
32            <Avatar.Image src={row.src} alt={row.name} />
33            <Avatar.Fallback>
34              {row.name
35                .split(' ')
36                .map((part) => part.charAt(0))
37                .join('')}
38            </Avatar.Fallback>
39          </Avatar>
40          <div className="min-w-0">
41            <p className="truncate text-sm font-medium">{row.name}</p>
42            <p className="text-muted-foreground truncate text-xs">{row.detail}</p>
43          </div>
44        </div>
45      ))}
46    </div>
47  );
48}

1'use client';
2
3import { Avatar } from '@/components/ui/avatar';
4import { Badge } from '@/components/ui/badge';
5
6const invites = [
7  {
8    // The photo URL is stale, so the image fails and the initials take over.
9    src: 'https://github.com/figueroaignacio.pn',
10    name: 'Camila Ortiz',
11    email: 'camila@acmestudio.dev',
12    initials: 'CO',
13    initialsClassName: undefined,
14  },
15  {
16    // Invited by email, no photo on file yet.
17    src: undefined,
18    name: 'Tomas Iglesias',
19    email: 'tomas@acmestudio.dev',
20    initials: 'TI',
21    initialsClassName: 'bg-primary text-primary-foreground',
22  },
23];
24
25export function WithFallback() {
26  return (
27    <div className="border-border bg-card w-full max-w-sm rounded-xl border p-4">
28      <p className="text-muted-foreground mb-3 text-xs">Pending invites</p>
29      <div className="flex flex-col gap-4">
30        {invites.map((invite) => (
31          <div key={invite.email} className="flex items-center justify-between gap-3">
32            <div className="flex min-w-0 items-center gap-3">
33              <Avatar>
34                {invite.src ? <Avatar.Image src={invite.src} alt={invite.name} /> : null}
35                <Avatar.Fallback className={invite.initialsClassName}>
36                  {invite.initials}
37                </Avatar.Fallback>
38              </Avatar>
39              <div className="min-w-0">
40                <p className="truncate text-sm font-medium">{invite.name}</p>
41                <p className="text-muted-foreground truncate text-xs">{invite.email}</p>
42              </div>
43            </div>
44            <Badge variant="secondary">Invited</Badge>
45          </div>
46        ))}
47      </div>
48    </div>
49  );
50}

1'use client';
2
3import { Avatar } from '@/components/ui/avatar';
4
5const reviewers = [
6  { src: 'https://github.com/figueroaignacio.png', name: 'Ignacio Figueroa', initials: 'IF' },
7  { src: 'https://github.com/nicvazquezdev.png', name: 'Nicolas Vazquez', initials: 'NV' },
8  { src: 'https://github.com/ManuZarraga.png', name: 'Manuel Zarraga', initials: 'MZ' },
9];
10
11export function AvatarGroup() {
12  return (
13    <div className="border-border bg-card w-full max-w-sm rounded-xl border p-4">
14      <p className="text-sm font-medium">Fix cart totals on partial refunds</p>
15      <p className="text-muted-foreground mt-1 text-xs">#412 opened 3 days ago by lucia</p>
16      <div className="mt-4 flex items-center gap-3">
17        <Avatar.Group>
18          {reviewers.map((reviewer) => (
19            <Avatar key={reviewer.name} size="sm">
20              <Avatar.Image src={reviewer.src} alt={reviewer.name} />
21              <Avatar.Fallback>{reviewer.initials}</Avatar.Fallback>
22            </Avatar>
23          ))}
24          <Avatar size="sm">
25            <Avatar.Fallback className="bg-muted text-muted-foreground text-xs">+3</Avatar.Fallback>
26          </Avatar>
27        </Avatar.Group>
28        <span className="text-muted-foreground text-xs">6 reviewers requested</span>
29      </div>
30    </div>
31  );
32}