Flight Ticket This component renders a detailed flight ticket. It is built to be highly reusable, accepting props for all dynamic content such as flight details, passenger information, and dates. It uses framer-motion for a subtle 3D hover effect and a staggered entrance animation for the passenger list, fulfilling the request for advanced animation. The styling is fully adaptive to your shadcn/ui theme.
import { FlightTicket } from "@/components/ui/flight-ticket"; // Adjust path as needed
export default function FlightTicketDemo() {
const ticketData = {
departure: {
code: "AMS",
name: "Amsterdam Airport Schiphol",
},
arrival: {
code: "CGK",
name: "Soekarno Hatta International Airport",
},
flightDate: new Date("2024-04-29T14:15:00"),
passengers: [
{
name: "Mr. Jonathan Wise",
type: "Adult" as const,
baggage: "20kg",
},
{
name: "Mrs. Samantha William",
type: "Adult" as const,
baggage: "20kg",
},
{
name: "Ms. Karen Summer",
type: "Child" as const,
baggage: "20kg",
},
],
};
return (
// The background is set to a neutral color to highlight the ticket
<div className="flex min-h-screen w-full items-center justify-center bg-background p-4">
<FlightTicket
departure={ticketData.departure}
arrival={ticketData.arrival}
flightDate={ticketData.flightDate}
passengers={ticketData.passengers}
/>
</div>
);
}