FreeToday
Today's free times on a studio's booking page, as chips under a quiet label. On the live page a tap starts the conversation; in setup's preview the same chips are drawn inert. Nothing shows when there are none.
Times
Free today
import { FreeToday } from "@/components/shared/free-today";
<FreeToday
times={["11:15", "11:30", "11:45", "12:00"]}
onPick={(time) => send(`I'd like to come in today at ${time}.`)}
/>Any number
The chips share one width, the widest time's, and fill as few rows as they need, as full as each other: four are two by two where only three fit, five are three over two, and a short last row sits centred. FreeToday measures its own width (a container query): two a row under 16rem, three from 16rem, four from 20rem. Last below: four in a phone-wide box.
Free today
Free today
Free today
<FreeToday times={["11:15", "11:30", "11:45"]} />
<FreeToday times={["11:15", "11:30", "11:45", "12:00", "12:15"]} />Waiting
While a reply is on its way, the chips wait.
Free today
<FreeToday times={times} disabled />API reference
| Prop | Type | Default | Description |
|---|---|---|---|
| times | string[] | — | HH:mm in the studio's own time; up to four that follow on from the day's bookings (venue-front on the live page, previewSlots in setup). |
| label | string | "Free today" | In the page's language. |
| onPick | (time: string) => void | — | A chip was tapped. |
| disabled | boolean | false | A reply is on its way. |
| className / style | string / CSSProperties | — | Layout, or an entrance's delay. |
Guidelines
- Only real free times: a chip never offers a time the studio can't take.