OfferedTime
The time a rebooking email offered, at the top of a studio's booking page in place of today's times: when, then what and with whom, under a quiet label. One tap books it; the other asks for other times. Both start the conversation, as a time chip does.
A time
Your time
Tuesday, November 3 at 10:30
Haircut · Jozef
import { OfferedTime } from "@/components/shared/offered-time";
<OfferedTime
label="Your time"
when="Tuesday, November 3 at 10:30"
detail="Haircut · Jozef"
bookLabel="Book it"
otherLabel="Other times"
onBook={() => send("Please book Haircut with Jozef, Tuesday, November 3 at 10:30.")}
onOther={() => send("I'd like Haircut with Jozef, but another time.")}
/>Long words
A long service or name wraps under the time; the buttons wrap under each other on a narrow card.
Váš termín
Štvrtok 12. novembra o 17:30
Gélové nechty — doplnenie · Kristína
<OfferedTime when="Štvrtok 12. novembra o 17:30" detail="Gélové nechty — doplnenie · Kristína" … />Waiting
While a reply is on its way, both buttons wait.
Your time
Tuesday, November 3 at 10:30
Haircut · Jozef
<OfferedTime … disabled />API reference
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | — | The quiet line over it, in the page's language. |
| when | string | — | The day and time in the studio's own time, written out (readOffer in venue-front). |
| detail | string | — | The service and the person: “Haircut · Jozef”. |
| bookLabel / otherLabel | string | — | The two buttons, in the page's language. |
| onBook / onOther | () => void | — | Each sends its message to the chat. |
| disabled | boolean | false | A reply is on its way. |
| className / style | string / CSSProperties | — | Layout, or an entrance's delay. |
Guidelines
- Only from a link the studio sent: the page shows it when the service and person are the studio's and the time is still ahead. Okami checks the time again before it books.
- In place of Free today, never beside it: one offer at the top.