Avatar

"use client";

import { Avatar, HStack } from "astralis-ui";

export function AvatarDemo() {
  return (
    <HStack gap="3">
      {/* Initials with a hue derived deterministically from the name. */}
      <Avatar name="Nova Starling" />
      <Avatar name="Alex Kim" />
      <Avatar name="Maria Lopez" />
      {/* No name, no image → icon fallback. */}
      <Avatar />
      <Avatar name="Sam Patel">
        <Avatar.Badge status="online" />
      </Avatar>
    </HStack>
  );
}

"use client";

import { Avatar } from "astralis-ui";

export function AvatarGroup() {
  return (
    /* Overlapping stack; everything past `max` collapses into "+N". */
    <Avatar.Group max={3}>
      <Avatar name="Nova Starling" />
      <Avatar name="Alex Kim" />
      <Avatar name="Maria Lopez" />
      <Avatar name="Sam Patel" />
      <Avatar name="Jo Ellis" />
    </Avatar.Group>
  );
}

"use client";

import { Avatar, HStack } from "astralis-ui";

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

export function AvatarSizes() {
  return (
    <HStack gap="4" alignItems="end" wrap="wrap" justifyContent="center">
      {sizes.map((size) => (
        <Avatar key={size} name="Nova Starling" size={size} />
      ))}
      <Avatar name="Nova Starling" shape="rounded" />
      <Avatar name="Nova Starling" shape="square" />
    </HStack>
  );
}