# League Scores

> Other games around the league, from a baseball board: each game's inning, both teams, their runs, and who is pitching.

- Name: `league-scores`
- Status: beta
- Categories: sport, display
- File: the install writes `league-scores.tsx` to your `ui` alias, `@/components/ui` by default.
- Gallery: https://arbokui.com/components/league-scores
- Registry item: https://arbokui.com/r/league-scores.json

## Install

1. Add the registry to `components.json`. Do this first, once:

   ```bash
   npx shadcn@latest registry add "@arbokui=https://arbokui.com/r/{name}.json"
   ```

   The command writes this entry. You can also add it by hand:

   ```json
   {
     "registries": {
       "@arbokui": "https://arbokui.com/r/{name}.json"
     }
   }
   ```

   Without this step, the shadcn CLI looks up `@arbokui` in a public list that Arbokui does not control.

2. Add the theme once per app. It replaces your color tokens with ones checked for contrast:

   ```bash
   npx shadcn@latest add @arbokui/theme
   ```

3. Add the component:

   ```bash
   npx shadcn@latest add @arbokui/league-scores
   ```

## Use it for

- Scores from other parks on a baseball scoreboard, one table per league or group.
- Pass each game with away and home, each with a short name, runs, and pitcher's number.
- Pass inning as the inning being played, or a word like "F" once it is final.
- Pass note for a line under the games, like the next series at this park.

## Avoid it for

- The game being played here. Use LineScore.
- Standings or a table of results. Use Standings.

## Props

- `title`: `string`. The league or group these games are in. It titles the table.
- `games`: `{ away: LeagueScoresSide; home: LeagueScoresSide; inning?: number | string }[]`. Each side is { name, runs?, pitcher? }. Visitors show on top, home below.
- `note`: `ReactNode`. A line under the games.
- `className`: `string`. Extra classes on the table. Later classes win.

## Accessibility

- It is a table captioned with title. Each team is a row header.
- Screen readers hear the column names in full: Inning, Team, Runs, and Pitcher.
- Each game is its own table body, and its inning spans both of its rows.

## Examples

### Two games in one group

```tsx
<LeagueScores
  title="North"
  games={[
    { inning: 9, away: { name: "Bay", runs: 5, pitcher: 10 }, home: { name: "Pine", runs: 6, pitcher: 10 } },
    { inning: "F", away: { name: "Oak", runs: 2, pitcher: 4 }, home: { name: "Lake", runs: 0, pitcher: 10 } },
  ]}
  note="Bay here Mon, Tue & Wed"
/>
```