Car Rental Booking

Installation

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

Usage

The file also exports booking20Demo, 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 { Booking20, booking20Demo } from "@/components/blocks/booking/booking20";

export default function Page() {
  return <Booking20 {...booking20Demo} />;
}

Props

Behavior notes

• Pickup/return location text inputs and the two date inputs are real controlled state.
• The car class grid (Compact/SUV/Luxury) is real single-select state: clicking a card selects it and highlights it with a ring, driving the daily rate used in the price calc.
• The insurance tier picker is three real native `input[type=radio]` elements styled as cards, real single-select state.
• The add-ons checklist (GPS, child seat, additional driver) is real native checkboxes backed by a Set of checked ids.
• The price breakdown parses the two date strings with `new Date(dateString)` to compute a day count, then multiplies the selected car's and insurance tier's daily rates by that count and adds checked add-on prices; it shows a fallback message when the dates don't form a valid range.
• The 'Reserve now' button is decorative only, no submission handler is wired since that would require a real backend.