Avatar

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

export function Basic() {
  return (
    <div className="flex items-center gap-4">
      <Avatar.Root>
        <Avatar.Image src="/avatars/lara.svg" alt="Lara Tucci" />
        <Avatar.Fallback delay={600}>LT</Avatar.Fallback>
      </Avatar.Root>
      <Avatar.Root>
        <Avatar.Fallback>NP</Avatar.Fallback>
      </Avatar.Root>
    </div>
  );
}

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

const sizes = ["sm", "md", "lg"] as const;

export function Sizes() {
  return (
    <div className="flex items-center gap-4">
      {sizes.map((size) => (
        <Avatar.Root key={size} size={size}>
          <Avatar.Fallback>NP</Avatar.Fallback>
        </Avatar.Root>
      ))}
    </div>
  );
}

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

export function Fallback() {
  return (
    <Avatar.Root>
      <Avatar.Image src="data:," alt="Noah Pierre" />
      <Avatar.Fallback>NP</Avatar.Fallback>
    </Avatar.Root>
  );
}

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

const people = [
  { name: "Lara Tucci", initials: "LT", src: "/avatars/lara.svg" },
  { name: "Devon Lane", initials: "DL", src: "/avatars/devon.svg" },
  { name: "Noah Pierre", initials: "NP", src: "/avatars/noah.svg" },
];

export function Group() {
  return (
    <div className="flex -space-x-2">
      {people.map((person) => (
        <Avatar.Root key={person.name} className="ring-2 ring-background">
          <Avatar.Image src={person.src} alt="" />
          <Avatar.Fallback>{person.initials}</Avatar.Fallback>
        </Avatar.Root>
      ))}
      <Avatar.Root className="ring-2 ring-background">
        <Avatar.Fallback>+5</Avatar.Fallback>
      </Avatar.Root>
    </div>
  );
}