import { PlatformCard } from "@/components/platform/platform-card";

<PlatformCard
  platform={{
    name: "Demo Console 3000",
    slug: "demo-console-3000",
    manufacturer: "Stub Industries",
    generation: "Sixth",
    release_date: "2003-09-15",
    image_url: null,
    category: "console",
  }}
/>

import { GameCard } from "@/components/game/game-card";

<GameCard
  slug="untitled-demo-game"
  title="Untitled Demo Game"
  coverImageUrl={null}
  developer="Stub Studios"
  firstReleaseDate="2024-06-01"
  summary="An imaginary stub game used to render the design system docs."
/>

import { SpecCard } from "@/components/ui/spec-card";

<div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
  <SpecCard label="CPU" value="MIPS R3000A · 33.87 MHz" />
  <SpecCard label="RAM" value="2 MB" />
  <SpecCard label="Released" value="1994-12-03" />
  <SpecCard label="Generation" value="Fifth" />
</div>

<ReviewCardPortrait review={review} />

<ReviewCardLandscape review={review} />

import { GenerationChip } from "@/components/ui/generation-chip";

<GenerationChip generation="Sixth" />
<GenerationChip generation="Sixth" active />

<GenerationChip generation="Sixth" active />

import { PageHeader } from "@/components/ui/page-header";

<PageHeader
  eyebrow="Reference"
  title="Section heading"
  subtitle="A short paragraph that sets context for the page."
/>

import { EmptyTabState } from "@/components/platform/empty-tab-state";

<EmptyTabState
  icon={<span aria-hidden="true">📦</span>}
  message="No reviews yet"
  submessage="Be the first to share your thoughts."
/>

import { PixelLoader } from "@/components/ui/pixel-loader";

<PixelLoader />

<Button onClick={handleSave}>Primary action</Button>

<Button variant="secondary" onClick={handleCancel}>
  Secondary action
</Button>

<Button variant="ghost" onClick={handleDismiss}>
  Ghost
</Button>

<Button size="sm">Small</Button>
<Button size="md">Medium (default)</Button>
<Button size="lg">Large</Button>

<Button href="/games">Browse games</Button>