Active Game Card

A compact resume card for an in-progress or paused game with score, inning, and location context.

11:23

Current game

Backyard Field / Saved just now

Paused

Away

Whiffleblowers

Inning▼ 4 of 5

Home

Bat Attitudes

Use this between setup and active scoring. It gives a returning scorekeeper enough context to identify the game, then exposes an optional Resume action without owning navigation or async state.

Install#

npx shadcn@latest add https://benhof.ai/r/active-game-card.json

Usage#

import { ActiveGameCard } from "@/components/active-game-card"

<ActiveGameCard
  away={{ name: "Whiffleblowers", score: 3 }}
  home={{ name: "Bat Attitudes", score: 4 }}
  inning={4}
  half="bottom"
  totalInnings={5}
  location="Backyard Field"
  lastUpdated="Saved just now"
  status="paused"
  onResume={resumeGame}
  isResuming={isOpening}
/>

Props#

Prop	Type	Default	Description
`away` / `home`	`ActiveGameTeam`	-	Team name and current score for each side.
`inning` / `half`	`number` / `"top" \	"bottom"`	-	Current game position.
`totalInnings`	`number`	-	Adds the scheduled length to the inning label.
`location`	`string`	-	Caller-formatted field or venue text.
`lastUpdated`	`string`	-	Caller-formatted save or sync text.
`status`	`"in_progress" \	"paused"`	`"in_progress"`	Controls the status label.
`onResume`	`() => void`	-	Adds the Resume button. Omit it for read-only use.
`isResuming`	`boolean`	`false`	Disables the action and shows its spinner.

The component never formats dates or changes routes. Pass the exact status text your application has already decided to show.