Meeting Room Booking

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its button dependencies and any missing npm packages, and installs them straight into your project.

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/booking/booking10.tsx instead.

Usage

The file also exports booking10Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Booking10, booking10Demo } from "@/components/blocks/booking/booking10";

export default function Page() {
  return <Booking10 {...booking10Demo} />;
}

Props

Types

interface Booking10Room {
  id: string;
  name: string;
  capacity: number;
  hourlyRate: number;
}

Behavior notes

• Selecting a room card is real single-select useState, with the selected card getting a primary ring and border.
• Equipment icons (Wifi/Tv/PenTool) are hardcoded per room by array index, not passed as demo data, since icon components can't cross the client/server boundary as props.
• The attendee stepper is real useState, clamped between 1 and the selected room's capacity.
• The total cost is computed live by splitting the start/end time state strings ("HH:MM") into minutes and doing simple arithmetic to get hours, then multiplying by the selected room's hourly rate. It shows a dash until a valid, positive time range and a room are both set.
• The 'Book room' button is decorative, no booking is actually submitted.