ScheduledLobby

A call that has not started yet: a countdown, with Join off until it is time.

SourcePackage @kerf-js/veneer

Preview

tsx

import {  ScheduledLobby,  Toaster,  toast} from '@kerf-js/veneer'export function Review() {  const to = Date.now() + 8 * 60_000  return (    <>      <ScheduledLobby        title="Incident review"        to={to}        onJoin={() => toast.show({ title: 'Joining' })}        onAddToCalendar={() =>          toast.show({ title: 'Added to your calendar' })        }      >        Join opens when the countdown ends.      </ScheduledLobby>      <Toaster />    </>  )}

Installation

npm install @kerf-js/veneer

Usage

tsx

import { ScheduledLobby } from '@kerf-js/veneer'

Open early

joinable lets people in now.

tsx

import { state } from '@kerf-js/core'import {  ScheduledLobby,  Stack,  Text} from '@kerf-js/veneer'export function Open() {  const to = Date.now() + 2 * 60_000  const joined = state(false)  return (    <Stack gap="related">      <ScheduledLobby        title="Incident review"        to={to}        joinable        onJoin={() => (joined.value = true)}      />      {joined.value && (        <Text subtle>Joining the call.</Text>      )}    </Stack>  )}

Accessibility

This has no shortcuts of its own: controls inside it use Tab, Enter and Space as usual, and veneer's parts keep their roles and labels.

API Reference

Prop	Type	Default	Description
`title`	`unknown`	—	The heading.
`children`	`unknown`	—	What it contains.
`to`	`number`	—	When it starts, in epoch ms.
`now`	`number`	—	The time now, to render on the server.
`joinable`	`boolean`	`false`	Turns Join on before the end.
`opensAt`	`string`	—	When Join opens, in words.

Event	Type	Default	Description
`onJoin`	`(() => void)`	—	Join was pressed.
`onAddToCalendar`	`(() => void)`	—	Adds Add to calendar.

RelatedCountdown Lobby