ServicesHoursPanel
A studio's services and hours, on its booking page and in setup's preview of it: the services with minutes and price, then the week, in a 3% ink wash. Past five services, “+ N more” says how many else there are.
A few services
Services
- Strih30 min · €15
- Strih + brada45 min · €18
- Úprava brady60 min · €21
- Strojčekový strih30 min · €24
Hours
- Mon–Fri 9:00–18:00
- Sat 9:00–13:00
import { ServicesHoursPanel } from "@/components/shared/services-hours-panel";
<ServicesHoursPanel services={services} hours={hours} locale="en" currency="EUR" />Many, as a picture
In setup's preview nothing can be pressed: “+ N more” is only words. The owner edits the full list on the Services card.
Services
- Strih30 min · €15
- Strih + brada45 min · €18
- Úprava brady60 min · €21
- Strojčekový strih30 min · €24
- Detský strih45 min · €27
+ 3 more
Hours
- Mon–Fri 9:00–18:00
- Sat 9:00–13:00
<ServicesHoursPanel services={services} hours={hours} locale="en" currency="EUR" />Many, on the live page
With expandable, “+ N more” is a button that opens every service in a dialog.
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
- Sat 9:00–13:00
<ServicesHoursPanel services={services} hours={hours} locale="en" currency="EUR" expandable />API reference
| Prop | Type | Default | Description |
|---|---|---|---|
| services | { id, name, durationMin, price }[] | — | In the studio's order; the first five show. |
| hours | string[] | — | The week in words, one line each (formatHours from setup-format). |
| locale | string | — | For prices. |
| labels | Partial<ServicesHoursPanelLabels> | English | services, hours, more(count), allServices; noServices and noHours hold an empty list's place (none by default). |
| expandable | boolean | false | “+ N more” opens the full list in a dialog, instead of only saying it. |
| className | string | — | Layout only. |
Guidelines
- Expandable on the live page only; a picture of the page (the preview) never opens anything.
- The preview and the live page use this same panel, so they never drift apart.