Avatar

"use client";

import { Avatar } from "@/components/miyuki-ui/avatar";
import { people } from "@/registry/lib/data";

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

export default function AvatarDemo() {
  return (
    <div className="flex flex-col items-center gap-6">
      <div className="flex items-end gap-4">
        {sizes.map((size, i) => (
          <Avatar key={size} size={size} src={people[i].avatar} name={people[i].name} />
        ))}
      </div>
      <div className="flex items-end gap-4">
        {sizes.map((size, i) => (
          <Avatar key={size} size={size} shape="rounded" src={people[i + 5].avatar} name={people[i + 5].name} />
        ))}
      </div>
    </div>
  );
}

"use client";

import { Avatar } from "@/components/miyuki-ui/avatar";
import { people } from "@/registry/lib/data";

export default function AvatarFallbackDemo() {
  return (
    <div className="flex flex-col items-center gap-6">
      <div className="flex flex-wrap items-center justify-center gap-3">
        {people.slice(0, 6).map((p) => (
          <Avatar key={p.handle} size="lg" name={p.name} />
        ))}
      </div>
      <div className="flex flex-wrap items-center justify-center gap-3">
        {people.slice(6, 12).map((p) => (
          <Avatar key={p.handle} size="md" shape="rounded" name={p.name} />
        ))}
        <Avatar size="md" shape="rounded" />
      </div>
    </div>
  );
}

"use client";

import { Avatar, type AvatarStatus } from "@/components/miyuki-ui/avatar";
import { people } from "@/registry/lib/data";

const team: { index: number; status: AvatarStatus; note: string }[] = [
  { index: 0, status: "online", note: "On the Happo ridge" },
  { index: 5, status: "away", note: "Back at 14:30" },
  { index: 2, status: "busy", note: "Recording the forecast" },
  { index: 9, status: "offline", note: "Last seen yesterday" },
];

export default function AvatarStatusDemo() {
  return (
    <ul className="flex w-full max-w-xs flex-col gap-4">
      {team.map(({ index, status, note }) => {
        const p = people[index];
        return (
          <li key={p.handle} className="flex items-center gap-3">
            <Avatar size="lg" src={p.avatar} name={p.name} status={status} />
            <div className="min-w-0">
              <p className="truncate text-sm font-medium text-foreground">{p.name}</p>
              <p className="truncate text-[13px] text-muted-foreground">{note}</p>
            </div>
          </li>
        );
      })}
    </ul>
  );
}

"use client";

import { Avatar, AvatarGroup } from "@/components/miyuki-ui/avatar";
import { people } from "@/registry/lib/data";

const crew = people.slice(0, 5);

export default function AvatarGroupDemo() {
  return (
    <div className="flex flex-col items-center gap-6">
      <div className="flex items-center gap-3">
        <AvatarGroup max={4} size="lg" aria-label="Hakuba ridge crew">
          {crew.map((p) => (
            <Avatar key={p.handle} src={p.avatar} name={p.name} />
          ))}
        </AvatarGroup>
        <p className="text-[13px] text-muted-foreground">5 going on Saturday</p>
      </div>
      <AvatarGroup max={4} size="sm" aria-label="Hakuba ridge crew">
        {crew.map((p) => (
          <Avatar key={p.handle} src={p.avatar} name={p.name} />
        ))}
      </AvatarGroup>
    </div>
  );
}