Orb Palettes

import {
  ORB_PALETTE_NOTES,
  ORB_PALETTES,
  type OrbPaletteName,
} from "@/components/orbs/orb-palettes"
import { VoiceOrb } from "@/components/orbs/voice-orb"

// The nine colorways on the Voice Orb, each named: pass the name as
// `palette` to the Voice Orb, the Planet or the docked chat.
export default function Demo() {
  return (
    <ul className="grid w-full max-w-3xl grid-cols-3 gap-x-6 gap-y-8 p-6 sm:grid-cols-5">
      {(Object.keys(ORB_PALETTES) as OrbPaletteName[]).map((name) => (
        <li key={name} className="flex flex-col items-center gap-3 text-center">
          <VoiceOrb palette={name} size={72} />
          <div className="flex flex-col">
            <span className="font-mono text-xs/4 tracking-widest uppercase">
              {name}
            </span>
            <span className="text-xs/4 text-muted-foreground">
              {ORB_PALETTE_NOTES[name]}
            </span>
          </div>
        </li>
      ))}
    </ul>
  )
}