A postgame score card that identifies the result, explains how the game ended, and exposes optional next actions.
11:23
Final score
Backyard Field / Completed after 5 innings
Final
Whiffleblowers
3
Bat Attitudes
7
Bat Attitudes win
The postgame end of the lifecycle. It composes Score Panel in its final state, derives the winner or tie from the scores, and keeps share and replay behavior behind callbacks.
Install#
npx shadcn@latest add https://benhof.ai/r/final-score-summary.json
The Score Panel dependency installs automatically.
Usage#
import { FinalScoreSummary } from "@/components/final-score-summary"
<FinalScoreSummary
away={{ name: "Whiffleblowers", score: 3 }}
home={{ name: "Bat Attitudes", score: 7 }}
inningsPlayed={5}
reason="completed"
location="Backyard Field"
onShare={shareResult}
onPlayAgain={resetGame}
/>
Props#
| Prop | Type | Default | Description | ||
|---|---|---|---|---|---|
away / home | ScorePanelTeam | - | Final team names and scores. | ||
inningsPlayed | number | - | Used in the completion summary. | ||
reason | `"completed" \ | "run_rule" \ | "manual"` | "completed" | Explains how play ended. |
location | string | - | Optional field or venue label. | ||
onShare | () => void | - | Adds a Share score action. | ||
shareState | `"idle" \ | "copied"` | "idle" | Lets the parent confirm its share or copy action. | |
onPlayAgain | () => void | - | Adds a Play again action. |
getGameWinner and formatCompletionReason are exported for result screens that need matching text elsewhere. Clipboard access and navigation stay outside the component.