Avatar

1import Image from 'next/image'
2
3import {
4    Avatar,
5    AvatarFallback,
6    AvatarImage,
7} from '@/components/ui/avatar'
8import { Card } from '@/components/ui/card'
9
10export function AvatarDemo() {
11    return (
12        <Avatar>
13            <AvatarImage src="/images/profile1.png" />
14            <AvatarFallback>Sb</AvatarFallback>
15        </Avatar>
16    )
17}
18

1import {
2    Avatar,
3    AvatarFallback,
4    AvatarImage,
5} from '@/components/ui/avatar'
6
7export function AvatarVariant() {
8    return (
9        <div className="flex gap-5 items-center">
10            <Avatar variant={'default'}>
11                <AvatarImage src="/images/profile1.png" />
12                <AvatarFallback>Sb</AvatarFallback>
13            </Avatar>
14            <Avatar variant={'outline'}>
15                <AvatarImage src="/images/profile2.png" />
16                <AvatarFallback>Sb</AvatarFallback>
17            </Avatar>
18        </div>
19    )
20}
21

1import {
2    Avatar,
3    AvatarFallback,
4    AvatarImage,
5} from '@/components/ui/avatar'
6
7export function AvatarSize() {
8    return (
9        <div className="flex items-center justify-center gap-3 sm:gap-5">
10            <Avatar size={'xl'}>
11                <AvatarImage src="/images/profile1.png" />
12                <AvatarFallback>Sb</AvatarFallback>
13            </Avatar>
14            <Avatar size={'lg'}>
15                <AvatarImage src="/images/profile2.png" />
16                <AvatarFallback>Sb</AvatarFallback>
17            </Avatar>
18            <Avatar size={'md'}>
19                <AvatarImage src="/images/profile3.png" />
20                <AvatarFallback>Sb</AvatarFallback>
21            </Avatar>
22            <Avatar size={'sm'}>
23                <AvatarImage src="/images/profile4.png" />
24                <AvatarFallback>Sb</AvatarFallback>
25            </Avatar>
26            <Avatar size={'xs'}>
27                <AvatarImage src="/images/profile5.png" />
28                <AvatarFallback>Sb</AvatarFallback>
29            </Avatar>
30        </div>
31    )
32}
33

1import {
2    Avatar,
3    AvatarFallback,
4    AvatarImage,
5} from '@/components/ui/avatar'
6
7export function AvatarRadius() {
8    return (
9        <div className="flex items-center justify-center gap-3 sm:gap-5">
10            <Avatar radius={'default'}>
11                <AvatarImage src="/images/profile1.png" />
12                <AvatarFallback>Sb</AvatarFallback>
13            </Avatar>
14            <Avatar radius={'xl'}>
15                <AvatarImage src="/images/profile2.png" />
16                <AvatarFallback>Sb</AvatarFallback>
17            </Avatar>
18            <Avatar radius={'lg'}>
19                <AvatarImage src="/images/profile3.png" />
20                <AvatarFallback>Sb</AvatarFallback>
21            </Avatar>
22            <Avatar radius={'md'}>
23                <AvatarImage src="/images/profile4.png" />
24                <AvatarFallback>Sb</AvatarFallback>
25            </Avatar>
26            <Avatar radius={'none'}>
27                <AvatarImage src="/images/profile5.png" />
28                <AvatarFallback>Sb</AvatarFallback>
29            </Avatar>
30        </div>
31    )
32}
33

1import {
2    Avatar,
3    AvatarFallback,
4    AvatarImage,
5} from '@/components/ui/avatar'
6
7export function AvatarGroup() {
8    return (
9        <div className="flex items-center justify-center -space-x-3">
10            <Avatar variant={'outline'}>
11                <AvatarImage src="/images/profile1.png" />
12                <AvatarFallback>Sb</AvatarFallback>
13            </Avatar>
14            <Avatar variant={'outline'}>
15                <AvatarImage src="/images/profile2.png" />
16                <AvatarFallback>Sb</AvatarFallback>
17            </Avatar>
18            <Avatar variant={'outline'}>
19                <AvatarImage src="/images/profile3.png" />
20                <AvatarFallback>Sb</AvatarFallback>
21            </Avatar>
22            <Avatar variant={'outline'}>
23                <AvatarImage src="/images/profile4.png" />
24                <AvatarFallback>Sb</AvatarFallback>
25            </Avatar>
26            <Avatar variant={'outline'}>
27                <AvatarFallback>+12</AvatarFallback>
28            </Avatar>
29        </div>
30    )
31}
32