Avatar

1import {
2  Example,
3  ExampleWrapper,
4} from "@/registry/bases/radix/components/example"
5import {
6  Avatar,
7  AvatarBadge,
8  AvatarFallback,
9  AvatarGroup,
10  AvatarGroupCount,
11  AvatarImage,
12} from "@/registry/bases/radix/ui/avatar"
13import { Button } from "@/registry/bases/radix/ui/button"
14import {
15  Empty,
16  EmptyContent,
17  EmptyDescription,
18  EmptyHeader,
19  EmptyMedia,
20  EmptyTitle,
21} from "@/registry/bases/radix/ui/empty"
22import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
23 
24export default function AvatarExample() {
25  return (
26    <ExampleWrapper>
27      <AvatarSizes />
28      <AvatarWithBadge />
29      <AvatarWithBadgeIcon />
30      <AvatarGroupExample />
31      <AvatarGroupWithCount />
32      <AvatarGroupWithIconCount />
33      <AvatarInEmpty />
34    </ExampleWrapper>
35  )
36}
37 
38function AvatarSizes() {
39  return (
40    <Example title="Sizes">
41      <div className="flex flex-wrap items-center gap-2">
42        <Avatar size="sm">
43          <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
44          <AvatarFallback>CN</AvatarFallback>
45        </Avatar>
46        <Avatar>
47          <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
48          <AvatarFallback>CN</AvatarFallback>
49        </Avatar>
50        <Avatar size="lg">
51          <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
52          <AvatarFallback>CN</AvatarFallback>
53        </Avatar>
54      </div>
55      <div className="flex flex-wrap items-center gap-2">
56        <Avatar size="sm">
57          <AvatarFallback>CN</AvatarFallback>
58        </Avatar>
59        <Avatar>
60          <AvatarFallback>CN</AvatarFallback>
61        </Avatar>
62        <Avatar size="lg">
63          <AvatarFallback>CN</AvatarFallback>
64        </Avatar>
65      </div>
66    </Example>
67  )
68}
69 
70function AvatarWithBadge() {
71  return (
72    <Example title="Badge">
73      <div className="flex flex-wrap items-center gap-2">
74        <Avatar size="sm">
75          <AvatarImage
76            src="https://github.com/jorgezreik.png"
77            alt="@jorgezreik"
78          />
79          <AvatarFallback>JZ</AvatarFallback>
80          <AvatarBadge />
81        </Avatar>
82        <Avatar>
83          <AvatarImage
84            src="https://github.com/jorgezreik.png"
85            alt="@jorgezreik"
86          />
87          <AvatarFallback>JZ</AvatarFallback>
88          <AvatarBadge />
89        </Avatar>
90        <Avatar size="lg">
91          <AvatarImage
92            src="https://github.com/jorgezreik.png"
93// … truncated