Components
Loading preview...
Flight Search – Effortless trip planning with clear routes, dates, and passenger details. One tap to find the best flights
@ravikatiyar
npx shadcn@latest add https://21st.dev/r/ravikatiyar162/flight-search// demo.tsx
"use client";
import React, { useState } from "react";
import { FlightSearchCard } from "@/components/ui/flight-search"; // Adjust the import path
const FlightSearchDemo = () => {
// State management for the flight search details
const [from, setFrom] = useState("New York");
const [to, setTo] = useState("Abu Dhabi");
const [departure, setDeparture] = useState("Apr 29, 2024");
const [returnDate, setReturnDate] = useState<string | null>("May 02, 2024");
const [passengers, setPassengers] = useState("2 Adults - 1 Child");
// Handler for swapping locations with a simple console log
const handleSwapLocations = () => {
console.log("Swapping locations...");
const temp = from;
setFrom(to);
setTo(temp);
};
// Handler for removing the return date
const handleRemoveReturn = () => {
console.log("Removing return date...");
setReturnDate(null);
};
// Handler for the search action
const handleSearch = () => {
alert(`Searching for flights:
From: ${from}
To: ${to}
Departure: ${departure}
Return: ${returnDate || 'One-way'}
Passengers: ${passengers}
`);
};
return (
<div className="flex h-screen w-full items-center justify-center bg-background p-4">
<FlightSearchCard
fromLocation={from}
toLocation={to}
departureDate={departure}
returnDate={returnDate}
passengers={passengers}
onSwapLocations={handleSwapLocations}
onRemoveReturnDate={handleRemoveReturn}
onSearch={handleSearch}
/>
</div>
);
};
export default FlightSearchDemo;