Avatar

 1import { IconUser } from "@tabler/icons-react";
 2import {
 3  Avatar,
 4  AvatarFallback,
 5  AvatarImage,
 6} from "@/components/wensity/avatar";
 7
 8export function AvatarFallbackDemo() {
 9  return (
10    <div className="flex gap-4">
11      <Avatar size="lg">
12        <AvatarFallback>Parth Sharma</AvatarFallback>
13      </Avatar>
14      <Avatar size="lg">
15        <AvatarFallback>
16          <IconUser stroke={1.75} />
17        </AvatarFallback>
18      </Avatar>
19      <Avatar size="lg">
20        <AvatarImage src="/missing.webp" alt="Broken image" />
21        <AvatarFallback delayMs={300}>Fallback</AvatarFallback>
22      </Avatar>
23    </div>
24  );
25}

 1import {
 2  Avatar,
 3  AvatarFallback,
 4  AvatarImage,
 5} from "@/components/wensity/avatar";
 6
 7export function AvatarStatusDemo() {
 8  return (
 9    <div className="flex gap-4">
10      <Avatar size="lg" status="online">
11        <AvatarImage src="/avatars/1.webp" alt="Online" />
12        <AvatarFallback>Online</AvatarFallback>
13      </Avatar>
14      <Avatar size="lg" status="away">
15        <AvatarFallback>Away</AvatarFallback>
16      </Avatar>
17      <Avatar size="lg" status="busy">
18        <AvatarFallback>Busy</AvatarFallback>
19      </Avatar>
20      <Avatar size="lg" status="offline">
21        <AvatarFallback>Off</AvatarFallback>
22      </Avatar>
23    </div>
24  );
25}

 1import {
 2  Avatar,
 3  AvatarFallback,
 4  AvatarGroup,
 5  AvatarGroupItem,
 6  AvatarImage,
 7} from "@/components/wensity/avatar";
 8
 9export function AvatarGroupDemo() {
10  return (
11    <AvatarGroup max={4} size="md">
12      <AvatarGroupItem name="Parth Sharma">
13        <Avatar>
14          <AvatarImage src="/avatars/1.webp" alt="Parth Sharma" />
15          <AvatarFallback>Parth Sharma</AvatarFallback>
16        </Avatar>
17      </AvatarGroupItem>
18      <AvatarGroupItem name="Maya Chen">
19        <Avatar>
20          <AvatarImage src="/avatars/2.webp" alt="Maya Chen" />
21          <AvatarFallback>Maya Chen</AvatarFallback>
22        </Avatar>
23      </AvatarGroupItem>
24      <AvatarGroupItem name="Jordan Lee">
25        <Avatar>
26          <AvatarFallback>Jordan Lee</AvatarFallback>
27        </Avatar>
28      </AvatarGroupItem>
29      <AvatarGroupItem name="Sam Ortiz">
30        <Avatar>
31          <AvatarFallback>Sam Ortiz</AvatarFallback>
32        </Avatar>
33      </AvatarGroupItem>
34      <AvatarGroupItem name="Riley Park">
35        <Avatar>
36          <AvatarFallback>Riley Park</AvatarFallback>
37        </Avatar>
38      </AvatarGroupItem>
39    </AvatarGroup>
40  );
41}

 1"use client";
 2
 3import { AvatarUpload } from "@/components/wensity/avatar";
 4
 5export function AvatarUploadDemo() {
 6  return (
 7    <AvatarUpload
 8      size="xl"
 9      initials="Parth Sharma"
10      onChange={(file) => console.log(file?.name)}
11    />
12  );
13}