Components
Loading preview...
Booking Form Description: A compact and visually polished form for handling travel or accommodation bookings. It features distinct sections for destination, dates, rooms, and guests, with smooth animations powered by Framer Motion. The component is fully responsive and adapts to both light and dark themes using shadcn/ui variables.
@lavikatiyar
npx shadcn@latest add https://21st.dev/r/lavikatiyar/form// demo.tsx
import React, { useState } from 'react';
import { BookingForm } from '@/components/ui/form'; // Adjust path as needed
export default function BookingFormDemo() {
const [destination, setDestination] = useState('Bali, Indonesia');
// Placeholder handlers for demonstration purposes
const handleDateRangeClick = () => {
alert('Date range selector opened!');
};
const handleRoomsClick = () => {
alert('Room selector opened!');
};
const handleGuestsClick = () => {
alert('Guest selector opened!');
};
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
alert('Checking availability...');
};
return (
<div className="flex h-screen w-full items-center justify-center bg-background p-4">
<BookingForm
destination={destination}
dateRange="8 May - 9 May"
rooms={2}
guests={4}
onDestinationChange={(e) => setDestination(e.target.value)}
onDateRangeClick={handleDateRangeClick}
onRoomsClick={handleRoomsClick}
onGuestsClick={handleGuestsClick}
onSubmit={handleSubmit}
/>
</div>
);
}