Hotel Room Booking

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its button, media-slot 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/booking7.tsx instead.

Usage

The file also exports booking7Demo, 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 { Booking7, booking7Demo } from "@/components/blocks/booking/booking7";

export default function Page() {
  return <Booking7 {...booking7Demo} />;
}

Props

Types

interface Booking7Room {
  id: string;
  name: string;
  image?: { src: string; alt: string };
  capacity: number;
  pricePerNight: number;
}

Behavior notes

• Selecting a room card is real single-select useState, with the selected card getting a primary ring and border.
• The guest counter's +/- buttons are real useState, clamped between 1 and 6.
• Amenity icons (Wifi/Coffee/Snowflake) 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 total price is computed live by parsing the check-in and check-out date state strings with new Date(), taking the difference in nights, and multiplying by the selected room's nightly price. It falls back to 'Select dates' until both dates are set and check-out is after check-in.
• The 'Book now' button is decorative, no booking is actually submitted.