HoursCard
The studio’s week in setup: a switch per day, its opening and closing times, and its breaks (BreakRows) under them. Everyone works these hours and breaks. Before any are saved it suggests Monday to Friday, 9 to 6, kept with “Use these hours” under the week.
Playground
Hours
Suggested hours. Change any day, or keep them as they are.
- Closed
- Closed
Edit a field: the patch it sends shows here.
import { HoursCard } from "@/components/shared/hours-card";
<HoursCard
hours={draft.hours}
onChange={(patch) => saveDraft(patch)}
/>The suggested week
With no hours saved, the card shows a suggestion and says so. “Use these hours” keeps it as it is; changing any day saves the whole week with that change. A day switched on takes the week's usual hours. A day that closes before it opens is refused, with the reason under it.
Hours
Suggested hours. Change any day, or keep them as they are.
- Closed
- Closed
import { HoursCard } from "@/components/shared/hours-card";
<HoursCard hours={draft.hours} onChange={saveDraft} />In the owner's language
locale names the days; the labels carry the rest.
Otváracie hodiny
- Zatvorené
import { HoursCard } from "@/components/shared/hours-card";
<HoursCard
hours={draft.hours}
onChange={saveDraft}
locale="sk"
labels={{ title: t("hours.title"), closed: t("hours.closed"), … }}
/>API reference
| Prop | Type | Default | Description |
|---|---|---|---|
| hours | OnboardingHours[] | — | The open days, { weekday, open, close }. Empty shows the suggestion. |
| onChange | (patch: DraftPatch) => void | — | Called with the whole checked week after each change. |
| locale | string | "en" | For the day names and the summary. |
| labels | Partial<HoursCardLabels> | English | Every word, including opens(day) and closes(day). |
| collapsed | boolean | false | One line: the week in runs, “Mon–Fri 9:00–18:00”. |
| hideTitle | boolean | false | The heading is read, not shown — in the conversation, where Okami's line introduces the card. |
Guidelines
- One week for the whole studio. Breaks and each person's own hours wait for the Team page.
- If the website gave hours, pass them: the suggestion is only for when nothing is known.