# LobbyDisplay
> Large-screen now-serving board with one card per room, up next and recent calls, a clock, and a chime plus flash for each new call, sized from its own width.
Source: https://docs.nasaqui.com/components/lobby-display
## Install
```bash
npx shadcn@latest add https://docs.nasaqui.com/r/lobby-display.json
```
A board for a television in the waiting room. Sizes use container queries, so it reads from across the room at 1920 pixels and still fits a phone. The board shows ticket numbers only, never names.
## When to use
- A screen in the waiting room shows who is called to which room.
- Reception previews the board on a laptop.
## When not to use
- A patient's own phone: use WaitingScreen.
## Import
```tsx
import { LobbyDisplay } from "@fadymondy/nasaq/web";
// inside this monorepo: "@nasaq/web"
```
## Quick start
```tsx
import { LobbyDisplay } from "@fadymondy/nasaq/web";
```
## Anatomy
```
LobbyDisplay data-slot="lobby-display" (@container)
├─ header clinic, clock, sound switch
├─ room cards ticket and room; a new call flashes
├─ up next the next tickets in line
├─ recent calls
└─ sr-only live region announces each new call
```
## API
Every `div` prop is passed through unless noted.
| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `entries` | `QueueEntry[]` | `required` | The whole queue. |
| `rooms` | `string[]` | `required` | Room or desk names, in board order. |
| `clinic` | `string` | | Name in the header. |
| `connection` | `"live" \| "reconnecting" \| "offline"` | `"live"` | Small indicator. |
| `sound, defaultSound, onSoundChange` | `boolean` | | The chime. Browsers need one click before sound can play. |
| `highlightMs` | `number` | `10000` | How long a fresh call stays highlighted. |
| `upNext` | `number` | `5` | Tickets listed under Up next. |
| `now` | `number` | | Epoch ms for stories. |
| `labels` | `Partial` | | Override any string. |
## Examples
**Sound needs a click**
```tsx
// The operator turns sound on once. Until then the board flashes and announces silently.
```
## Accessibility
- A new call is announced through an assertive live region. The first render is silent.
- The flash respects reduced motion: the highlight stays, the pulse stops.
- Contrast is high for reading at a distance.
## RTL & i18n
- The board mirrors. Tickets and the clock stay left to right.
- Strings live in a `STRINGS = { en, ar }` object and any of them can be replaced with `labels`. The locale comes from `NasaqProvider`.
## Styling & tokens
- Colours, radii and type come from `--nq-*` tokens; nothing is a raw colour. Spacing and alignment use logical classes.
- Target `[data-slot="lobby-display"]` and the inner `data-slot` parts shown in the anatomy.
## Do / Don't
- Do keep the async callbacks honest: return `{ error }` so the component can show the message.
- Do pass `now` in tests and stories so the output stays the same.
- Don't fetch inside the component: it is presentational and takes data and callbacks.
- Don't rely on colour for state: every state also has a word.
## Related
- [`waiting-screen`](https://docs.nasaqui.com/components/waiting-screen)
- [`clinic-queue`](https://docs.nasaqui.com/components/clinic-queue)
- [`check-in-kiosk`](https://docs.nasaqui.com/components/check-in-kiosk)
## Lab
https://docs.nasaqui.com/?path=/docs/components-bookings-lobby-display--docs
## Code
### React
```tsx
import { LobbyDisplay } from "@fadymondy/nasaq/web";
```
### shadcn
```tsx
import { LobbyDisplay } from "@/components/ui/lobby-display";
```
### Vue
```vue
```
### Blade
```blade
@php
$t = now()->getTimestamp() * 1000;
$base = ['checkedInAt' => $t - 3600000];
$queue = [
$base + ['id' => 'a', 'ticket' => 'A-014', 'number' => 14, 'status' => 'serving', 'room' => '2', 'queuedAt' => $t - 1500000, 'calledAt' => $t - 600000],
$base + ['id' => 'b', 'ticket' => 'A-015', 'number' => 15, 'status' => 'called', 'room' => '3', 'queuedAt' => $t - 1200000, 'calledAt' => $t - 90000],
$base + ['id' => 'c', 'ticket' => 'A-016', 'number' => 16, 'status' => 'waiting', 'queuedAt' => $t - 600000],
$base + ['id' => 'd', 'ticket' => 'A-017', 'number' => 17, 'status' => 'waiting', 'priority' => 'urgent', 'queuedAt' => $t - 500000],
$base + ['id' => 'e', 'ticket' => 'A-018', 'number' => 18, 'status' => 'waiting', 'queuedAt' => $t - 300000],
];
@endphp
```
### HTML + Alpine
```html