Hour Slot Booker

Install

Or by hand, in a Next.js project with shadcn set up. It writes components/pastetaste/hour-slot-booker.tsx.

Install the pastetaste component "Hour Slot Booker" (hour-slot-booker) into this Next.js project and use it.

What it is: Hire-by-the-hour booking panel: room, a 14-day strip with free-hour counts, length chips, an hour track with booked hours hatched, crew capacity check, add-ons and a live quote that ends in a held slot.

Before you place it, ask me (one short message, in my language; "skip" = sensible default): which page and section it goes in, my brand colour (hex), the text, labels or images it should show, and whether I want my logo or my own copy in the demo content. Then:

Steps:
1. If the project has no components.json, run: npx shadcn@latest init -y -d. Then run: npx shadcn@latest add https://pastetaste.com/r/hour-slot-booker.json
   (it writes components/pastetaste/hour-slot-booker.tsx; install any npm packages it reports).
2. Import it: import { HourSlotBooker } from "@/components/pastetaste/hour-slot-booker" (check the file for the exact named export).
3. Put it where it fits on the page I name, keep the rest of the page untouched, and pass props for my colours instead of editing the installed file.
4. It does not depend on Tailwind; colours come from CSS variables (--pt-*) or props.
5. It supports prefers-reduced-motion with a still state; do not remove it.

Props (all optional unless the type has no default):
- resources: SlotResource[] — Rooms or resources: id, name, optional no, hour price, half and day prices, capacity.
- addons: SlotAddon[] = [] — Kit add-ons with price; `only` limits one to a resource id, `defaultOn` pre-ticks it.
- durations: { h: number; label: string }[] = 2 h, 3 h, Half day (5), Full day (10) — Lengths offered. 5 h and 10 h use the resource's half and day price.
- open / close: number = 7 / 23 — First and last hour of the hour track.
- booked: (id: string, iso: string) => Set<number> = deterministic mock — Hours already taken for a resource on a date.
- currency / vatRate / depositRate: string / number / number = '£' / 0.2 / 0.3 — Money symbol, VAT share and deposit share of the total.
- earlyBefore: number = 9 — Starts before this hour get the first hour at half price.
- days: number = 14 — Days in the date strip.
- title: string = 'Pick a room and a slot.' — Heading of the panel.
- onRequest: (r: SlotRequest) => void — Called with the full request when the form is submitted.

Live preview: https://pastetaste.com/c/hour-slot-booker
Then run the dev server, check it in the browser at desktop and mobile width, and tell me the page URL.

Props 10