# Batting Order

> A team's batting order from a baseball board: each player's shirt number and position, with the batter at the plate marked.

- Name: `batting-order`
- Status: beta
- Categories: sport, display
- File: the install writes `batting-order.tsx` to your `ui` alias, `@/components/ui` by default.
- Other registry items: `@arbokui/shirt-number`, `@arbokui/glide-highlight`. The install adds them.
- Gallery: https://arbokui.com/components/batting-order
- Registry item: https://arbokui.com/r/batting-order.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/batting-order
   ```

## Use it for

- A team's lineup on a baseball scoreboard or a game page.
- Pass the players in batting order, first to last, each with number and position, like "SS" or "2B".
- Pass atBat with the shirt number at the plate while that team bats. Leave it out while they field.
- Add name to each player for a team sheet. A board that shows numbers only leaves it out.

## Avoid it for

- A squad list with no order. Use a list with ShirtNumber beside each name.
- A lineup that sorts or filters. Use DataTable.

## Props

- `team`: `string`. The team's name, which titles the table.
- `players`: `{ number: number; position: string; name?: string }[]`. The players in batting order. Shirt numbers must be unique, since each one is a key. An empty list says "No players yet".
- `atBat`: `number`. The shirt number of the player at the plate.
- `className`: `string`. Extra classes on the table, which sits under the team's name in a box marked data-slot="batting-order-container" that also holds the hover tint. Later classes win, and the other props go to the table too.

## Accessibility

- It is a table. The team's name above it names the table, with "batting order" added for screen readers.
- Screen readers hear standard positions in words, like "Shortstop" for SS. Other positions read as you pass them.
- The batter at the plate has a brand plate, and screen readers hear "at bat" after their position. Forced colors paint fills away, so there the plate is outlined instead.

## Examples

### Numbers and positions, with the batter marked

```tsx
<BattingOrder
  team="Rivers"
  atBat={28}
  players={[
    { number: 17, position: "RF" },
    { number: 15, position: "2B" },
    { number: 28, position: "CF" },
  ]}
/>
```

### A team sheet with names

```tsx
<BattingOrder team="Harbor" players={[{ number: 11, position: "SS", name: "A. Lane" }, { number: 18, position: "2B", name: "B. Cruz" }]} />
```