{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "game-header",
  "title": "Game header",
  "description": "The top of a pokerdata.io game page: the game's name, ante, stack depths, field size and payouts. Pass the header from pokerdata.io's partner API.",
  "registryDependencies": [
    "https://www.pokerstudy.ai/r/payouts-dialog.json"
  ],
  "files": [
    {
      "path": "src/components/pokerdata/game-header.tsx",
      "content": "import type { ReactNode } from \"react\";\nimport { PayoutsDialog } from \"@/components/pokerdata/payouts-dialog\";\n\n/**\n * The top of a pokerdata.io game page: what the game is and what it holds.\n * The packs themselves (browse, download, the bundle) live in the catalog\n * table below. Shared by pokerdata.io and pokerstudy.ai's /downloads; the\n * header comes in as plain data (`gameHeader` in pokerdata's\n * `@/lib/game-summary`, served to pokerstudy.ai by its partner API).\n */\n\nexport type GameHeaderInfo = {\n  /** Small line above the title: \"Pot-limit Omaha · 9-max\". */\n  eyebrow: string;\n  title: string;\n  ante: string;\n  /** \"60–100bb\", or \"—\" with no packs. */\n  stacks: string;\n  fieldSize?: string;\n  /** \"Top 15% paid\". */\n  payouts?: string;\n  /** The payout table the packs were solved with, for \"View payouts\". */\n  payoutTable?: { payouts: readonly number[]; source: string };\n  /** Leave the fact cells out (the title says it all). */\n  hideFacts?: boolean;\n};\n\nfunction Fact({\n  label,\n  value,\n  action,\n}: {\n  label: string;\n  value: string;\n  /** Optional button on the cell's right, e.g. \"View payouts\". The cell then takes a full row on phones. */\n  action?: ReactNode;\n}) {\n  return (\n    <div\n      className={`flex items-center justify-between gap-3 rounded-[var(--rb-r-md,8px)] border border-neutral-800 bg-neutral-900/60 px-3 py-2 ${action ? \"col-span-2 sm:col-span-1\" : \"\"}`}\n    >\n      <div className=\"flex min-w-0 flex-col gap-0.5\">\n        <span className=\"text-[13px] font-medium text-neutral-100\">{value}</span>\n        <span className=\"text-xs text-neutral-500\">{label}</span>\n      </div>\n      {action}\n    </div>\n  );\n}\n\nexport function GameHeader({ header }: { header: GameHeaderInfo }) {\n  return (\n    <header className=\"flex flex-col gap-4\">\n      <div className=\"flex flex-col gap-1.5\">\n        <p className=\"text-xs font-medium uppercase tracking-[0.08em] text-neutral-500\">\n          {header.eyebrow}\n        </p>\n        <h1 className=\"text-2xl font-medium tracking-[-0.01em] text-neutral-100 sm:text-3xl\">\n          {header.title}\n        </h1>\n      </div>\n      {!header.hideFacts && (\n      <div className=\"grid grid-cols-2 gap-2 sm:grid-cols-3 lg:flex lg:flex-wrap lg:*:min-w-[160px] lg:*:flex-1\">\n        <Fact label=\"Ante\" value={header.ante} />\n        <Fact label=\"Stack depths\" value={header.stacks} />\n        {header.fieldSize ? <Fact label=\"Field size\" value={header.fieldSize} /> : null}\n        {header.payouts ? (\n          <Fact\n            label=\"Payout structure\"\n            value={header.payouts}\n            action={\n              header.payoutTable ? (\n                <PayoutsDialog\n                  payouts={header.payoutTable.payouts}\n                  source={header.payoutTable.source}\n                  paid={header.payouts}\n                />\n              ) : null\n            }\n          />\n        ) : null}\n      </div>\n      )}\n    </header>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/pokerdata/game-header.tsx"
    }
  ],
  "type": "registry:block"
}