Avatar

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";

export default function Basic() {
  return (
    <>
      <Avatar>
        <AvatarImage src="/avatars/avatar-01.webp" />
        <AvatarFallback>PJ</AvatarFallback>
      </Avatar>
      <Avatar>
        <AvatarFallback>PJ</AvatarFallback>
      </Avatar>
    </>
  );
}

import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import { ShoppingBag, User } from "@mynaui/icons-react";

export default function FallbackIcons() {
  return (
    <>
      <Avatar>
        <AvatarFallback>
          <User className="size-1/2 text-muted-foreground" stroke={2} />
        </AvatarFallback>
      </Avatar>
      <Avatar>
        <AvatarFallback>
          <ShoppingBag className="size-1/2 text-muted-foreground" stroke={2} />
        </AvatarFallback>
      </Avatar>
      <Avatar>
        <AvatarFallback className="font-bold text-muted-foreground">
          J
        </AvatarFallback>
      </Avatar>
    </>
  );
}

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";

export default function ImageSizes() {
  return (
    <>
      <Avatar className="size-4">
        <AvatarImage src="/avatars/avatar-01.webp" />
        <AvatarFallback>PJ</AvatarFallback>
      </Avatar>
      <Avatar className="size-6">
        <AvatarImage src="/avatars/avatar-02.webp" />
        <AvatarFallback>PJ</AvatarFallback>
      </Avatar>
      <Avatar className="size-8">
        <AvatarImage src="/avatars/avatar-03.webp" />
        <AvatarFallback>PJ</AvatarFallback>
      </Avatar>
      <Avatar>
        <AvatarImage src="/avatars/avatar-04.webp" />
        <AvatarFallback>PJ</AvatarFallback>
      </Avatar>
      <Avatar className="size-12">
        <AvatarImage src="/avatars/avatar-05.webp" />
        <AvatarFallback>PJ</AvatarFallback>
      </Avatar>
      <Avatar className="size-14">
        <AvatarImage src="/avatars/avatar-06.webp" />
        <AvatarFallback>PJ</AvatarFallback>
      </Avatar>
      <Avatar className="size-16">
        <AvatarImage src="/avatars/avatar-07.webp" />
        <AvatarFallback>PJ</AvatarFallback>
      </Avatar>
    </>
  );
}

import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import { User } from "@mynaui/icons-react";

export default function IconSizes() {
  return (
    <>
      <Avatar className="size-4">
        <AvatarFallback>
          <User className="size-1/2 text-muted-foreground" stroke={2} />
        </AvatarFallback>
      </Avatar>
      <Avatar className="size-6">
        <AvatarFallback>
          <User className="size-1/2 text-muted-foreground" stroke={2} />
        </AvatarFallback>
      </Avatar>
      <Avatar className="size-8">
        <AvatarFallback>
          <User className="size-1/2 text-muted-foreground" stroke={2} />
        </AvatarFallback>
      </Avatar>
      <Avatar>
        <AvatarFallback>
          <User className="size-1/2 text-muted-foreground" stroke={2} />
        </AvatarFallback>
      </Avatar>
      <Avatar className="size-12">
        <AvatarFallback>
          <User className="size-1/2 text-muted-foreground" stroke={2} />
        </AvatarFallback>
      </Avatar>
      <Avatar className="size-14">
        <AvatarFallback>
          <User className="size-1/2 text-muted-foreground" stroke={2} />
        </AvatarFallback>
      </Avatar>
      <Avatar className="size-16">
        <AvatarFallback>
          <User className="size-1/2 text-muted-foreground" stroke={2} />
        </AvatarFallback>
      </Avatar>
    </>
  );
}

import { Avatar, AvatarFallback } from "@/components/ui/avatar";

export default function TextSizes() {
  return (
    <>
      <Avatar className="size-6">
        <AvatarFallback className="text-xs font-bold">PJ</AvatarFallback>
      </Avatar>
      <Avatar className="size-8">
        <AvatarFallback className="text-sm font-bold">PJ</AvatarFallback>
      </Avatar>
      <Avatar>
        <AvatarFallback className="text-sm font-bold">PJ</AvatarFallback>
      </Avatar>
      <Avatar className="size-12">
        <AvatarFallback className="text-sm font-bold">PJ</AvatarFallback>
      </Avatar>
      <Avatar className="size-14">
        <AvatarFallback className="text-base font-bold">PJ</AvatarFallback>
      </Avatar>
      <Avatar className="size-16">
        <AvatarFallback className="text-lg font-bold">PJ</AvatarFallback>
      </Avatar>
    </>
  );
}