Avatar

import { Group } from "@/ui/group";
import { StarIcon } from "@/icons/*";
import { Avatar } from "@/ui/avatar";

export function AvatarsDemo() {
  return (
    <Group justify="center">
      {/* With image and fallback */}
      <Avatar src="avatar.png" alt="it's me" fallback="Brian and friends" />

      {/* Default placeholder */}
      <Avatar round="12" />

      {/* Fallback Element Only */}
      <Avatar fallback={<p className="font-sans text-2xl font-extrabold italic">K</p>} />

      {/* Letters with xl radius */}
      <Avatar color="hsl(var(--constructive)/0.5)" round="12">
        Mike
      </Avatar>

      {/* Custom placeholder with fallback */}
      <Avatar color="blue" round="8" fallback="x">
        <StarIcon size="1.5rem" />
      </Avatar>
    </Group>
  );
}