Player

Import from @workspace/ui-bridge/player/*.

Selection components live on the Player selector page.

PlayerDisplay

A player position as its translated label (default), its compass icon, or both. notation="short" shows the initial instead of the name; an ancestor carrying data-player-notation="short" forces the initial on every label below it, so a layout can switch its labels without threading a prop. The needle points at the position; activeColor and inactiveColor take any CSS color.

import { PlayerDisplay } from '@workspace/ui-bridge/player/player-display';

<PlayerDisplay player="N" />
<PlayerDisplay player="S" variant="icon" />
<PlayerDisplay player="E" variant="icon+label" inactiveColor="var(--color-muted-foreground)" />
<PlayerDisplay player="W" notation="short" />  {/* "W" */}
<div data-player-notation="short"><PlayerDisplay player="E" /></div>  {/* "E" */}

Gallery

Props

PlayerTeamDisplay

A partnership (NS / EW, or the legacy attack / defense side) as its label, its four-seat icon, or both (default). Renders nothing for an unknown team. colorize tints the label with the team color; variant="pill" is icon + label in a softly rounded chip with a faint fill of that color (purple for NS, orange for EW).

import { PlayerTeamDisplay } from '@workspace/ui-bridge/player/player-team-display';

<PlayerTeamDisplay team="NS" />
<PlayerTeamDisplay team="defense" variant="label" colorize />
<PlayerTeamDisplay team="EW" variant="pill" />

Gallery

Props

Utilities