Board
Compound component for the compass board layout and deal preview.
Import from @workspace/bridge-react/board/board, @workspace/bridge-react/board/*.
Overview
The Board module provides a compound layout component for positioning 4 hands in the standard bridge compass layout (N/E/S/W + center). It's purely structural — no shared state or context provider.
Board Compound
import { Board } from '@workspace/bridge-react/board/board';
import { Hand } from '@workspace/bridge-react/hand/hand';
const PLAYERS = ['N', 'E', 'S', 'W'] as const;
const SUITS = ['S', 'H', 'D', 'C'] as const;
<Board.Layout>
{PLAYERS.map(p => (
<Board.Position key={p} position={p}>
<Hand.Root player={p} cards={hands[p]}>
{SUITS.map(suit => (
<Hand.InputRow key={suit} suit={suit} value={hands[p][suit]} />
))}
</Hand.Root>
</Board.Position>
))}
<Board.Center>
<PlayerSelector />
</Board.Center>
</Board.Layout>Compound API
| Component | Description |
|---|---|
Board.Layout | CSS grid container with responsive breakpoints |
Board.Position | Positioned slot for N/E/S/W (sets grid-area) |
Board.Center | Center content slot (hidden on mobile) |
Board.Layout
CSS grid container for the compass board layout. Responsive: 7-column mobile → 3-column desktop (via @lg container query).
Props
Prop
Type
Board.Position
Positioned slot in the compass layout. Sets grid-area based on the position prop.
Props
Prop
Type
Board.Center
Center content slot. Hidden on mobile, visible on desktop (@lg container query). Typically used for a player selector.
Props
Prop
Type
DealBoardPreview
Compact read-only 4-hand preview with condensed layout. Shows all 4 hands with rank/suit displays in a compass grid.
import { DealBoardPreview } from '@workspace/bridge-react/board/deal-board-preview';
<DealBoardPreview
hands={[
{ player: 'N', hand: { S: 'AKQ', H: 'J32', D: 'T98', C: '765' } },
{ player: 'E', hand: { S: 'J54', H: 'AKQ', D: '432', C: 'T98' } },
{ player: 'S', hand: { S: 'T98', H: '765', D: 'AKQ', C: 'J32' } },
{ player: 'W', hand: { S: '765', H: 'T98', D: 'J54', C: 'AKQ' } },
]}
renderPlayer={(p) => p}
/>Demo
Props
Prop
Type