Celestograph Placeholder

import { PLATE_PALETTES } from "@/components/celestograph/celestograph-engine"
import { CelestographPlaceholder } from "@/components/celestograph/celestograph-placeholder"

export default function CelestographPlaceholderDemo() {
  return (
    // Each tile fills its column and keeps its own ratio: stretched across,
    // never down to the tallest neighbor. One plate palette per tile.
    <div className="grid w-full max-w-2xl grid-cols-[1.6fr_1fr_1fr] place-items-center items-start justify-items-stretch gap-4 p-6">
      <CelestographPlaceholder
        shape="wide"
        from="wide"
        palette={PLATE_PALETTES.warmth}
      />
      <CelestographPlaceholder
        shape="portrait"
        from="portrait"
        palette={PLATE_PALETTES.tarn}
      />
      <CelestographPlaceholder
        shape="circle"
        from="circle"
        palette={PLATE_PALETTES.delft}
      />
    </div>
  )
}