LobbyDisplay

Code

import { LobbyDisplay } from "@fadymondy/nasaq/web";<LobbyDisplay entries={queue} rooms={["1", "2", "3"]} clinic="Nasaq Family Clinic" />

Bookings · beta

Live examples and controls: LobbyDisplay in the lab.

InstallCopy Anchor Link

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 useCopy Anchor Link

• A screen in the waiting room shows who is called to which room.
• Reception previews the board on a laptop.

When not to useCopy Anchor Link

• A patient's own phone: use WaitingScreen.

ImportCopy Anchor Link

import { LobbyDisplay } from "@fadymondy/nasaq/web";
// inside this monorepo: "@nasaq/web"

Quick startCopy Anchor Link

import { LobbyDisplay } from "@fadymondy/nasaq/web";

<LobbyDisplay entries={queue} rooms={["1", "2", "3"]} clinic="Nasaq Family Clinic" />

AnatomyCopy Anchor Link

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

APICopy Anchor Link

Every div prop is passed through unless noted.

ExamplesCopy Anchor Link

Sound needs a click

// The operator turns sound on once. Until then the board flashes and announces silently.

AccessibilityCopy Anchor Link

• 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 & i18nCopy Anchor Link

• 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 & tokensCopy Anchor Link

• 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'tCopy Anchor Link

• 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.

RelatedCopy Anchor Link

• waiting-screen
• clinic-queue
• check-in-kiosk

LabCopy Anchor Link

https://docs.nasaqui.com/?path=/docs/components-bookings-lobby-display--docs