UI Bridge
Player selector
Controlled components for picking a player position.
Import from @workspace/ui-bridge/player/player-selector or @workspace/ui-bridge/player/selected-player-alert. Both compose the Player atoms.
PlayerSelector
Controlled player selector with two layout variants:
- buttons — compass-style grid with directional icons (default)
- select — dropdown select
import { PlayerSelector } from '@workspace/ui-bridge/player/player-selector';
<PlayerSelector value={player} onChange={setPlayer} />
<PlayerSelector value={player} onChange={setPlayer} variant="select" />Props
Prop
Type
SelectedPlayerAlert
Alert component showing the currently selected player position with a title and description. On small screens (< @xl), displays a PlayerSelector dropdown instead of the alert.
Import from @workspace/ui-bridge/player/selected-player-alert.
import { SelectedPlayerAlert } from '@workspace/ui-bridge/player/selected-player-alert';
<SelectedPlayerAlert player="N" onChange={setPlayer} />Props
Prop
Type
Custom Labels
Override the default English labels via the labels prop:
<SelectedPlayerAlert
player="N"
onChange={setPlayer}
labels={{
positionTitle: { N: "Nord", S: "Sud", E: "Est", W: "Ouest" },
positionDescription: { north: "Position du déclarant", south: "...", east: "...", west: "..." },
}}
/>