Celestograph Avatar Base

import { CelestographAvatarBase } from "@/components/celestograph/celestograph-avatar-base"

const IDS = [
  "ada.lovelace",
  "bruno.latour",
  "chidi.anagonye",
  "dara.khosrowshahi",
]

// The id is the seed, so each one is captioned with it.
export default function CelestographAvatarBaseDemo() {
  return (
    <div className="flex w-full flex-wrap place-items-center justify-center gap-8 p-6">
      {IDS.map((id) => (
        <figure key={id} className="grid justify-items-center gap-2">
          <CelestographAvatarBase id={id} size={104} />
          <figcaption className="text-sm text-muted-foreground">
            {id}
          </figcaption>
        </figure>
      ))}
    </div>
  )
}