Components
Loading preview...
Ride Booking Form This component provides a complete UI for scheduling a ride, including location inputs, date/time selectors, and a call-to-action button. It's designed to be easily integrated into any application requiring a booking interface.
@ravikatiyar
npx shadcn@latest add https://21st.dev/r/ravikatiyar162/ride-booking-form// demo.tsx
import { RideBookingForm } from "@/components/ui/ride-booking-form"; // Corrected import path
const Demo = () => {
// Handler for the form submission
const handleSearch = (details: {
pickup: string;
dropoff: string;
date: string;
time: string;
}) => {
console.log("Searching for a ride with details:", details);
alert(`Searching from ${details.pickup} to ${details.dropoff}`);
};
return (
<div className="flex items-center justify-center w-full min-h-screen bg-muted">
<RideBookingForm
imageUrl="https://cn-geo1.uber.com/image-proc/crop/resizecrop/udam/format=auto/width=1344/height=896/srcb64=aHR0cHM6Ly90Yi1zdGF0aWMudWJlci5jb20vcHJvZC91ZGFtLWFzc2V0cy9hM2NmODU2NC1lMmE2LTQxOGMtYjliMC02NWRkMjg1YzEwMGIuanBn"
city="Chandigarh, IN"
onSearch={handleSearch}
className="my-8"
/>
</div>
);
};
export default Demo;