BookingFront
How a studio's booking page opens, before the first message: its head, today's free times, then its services and hours. One component for the live page and setup's preview, so the page opens exactly as the owner saw it.
Live
A time starts the chat; “+ N more” opens every service.
Belaze
Barbershop@pele.belaze
Terézie Vansovej 3347/4A, Prievidza
Free today
Services
- Strih30 min · €15
- Strih + brada45 min · €18
- Úprava brady60 min · €21
- Strojčekový strih30 min · €24
- Detský strih45 min · €27
Hours
- Mon–Fri 9:00–18:00
import { BookingFront } from "@/components/shared/booking-front";
<BookingFront {...front} onPick={(time) => startChat(time)} />Still (the preview)
A picture of the page: the times are inert, “+ N more” is only words, and an empty panel holds its place.
Belaze
Barbershop@pele.belaze
Terézie Vansovej 3347/4A, Prievidza
Free today
Services
- Strih30 min · €15
- Strih + brada45 min · €18
- Úprava brady60 min · €21
- Strojčekový strih30 min · €24
- Detský strih45 min · €27
Hours
- Mon–Fri 9:00–18:00
<BookingFront {...front} still />API reference
| Prop | Type | Default | Description |
|---|---|---|---|
| head | StudioHead props | — | Name, logo, craft, Instagram, address, heading. |
| times / freeTodayLabel / onPick / picking | string[] / string / (time) => void / boolean | — | Today's free times and what a tap does (FreeToday). |
| services / hours / locale / panelLabels | PanelService[] / string[] / string / labels | — | The services and the week (ServicesHoursPanel). |
| still | boolean | false | A picture of the page: times inert, “+ N more” only words, an empty panel holding its place. |
Guidelines
- The preview is the source of truth: change it here, and the live page follows.