Components
Loading preview...
Flight Status Card A modern, animated card component to display real-time flight information, including boarding status, gate details, and timelines, designed to be easily integrated into any travel-related application.
@ravikatiyar
npx shadcn@latest add https://21st.dev/r/ravikatiyar162/flight-status-card// demo.tsx
import React, { useState, useEffect } from 'react';
import { FlightStatusCard } from '@/components/ui/flight-status-card';
import { PlaneTakeoff } from 'lucide-react';
const FlightStatusCardDemo = () => {
const [progress, setProgress] = useState(0);
// Animate progress for demonstration purposes
useEffect(() => {
const interval = setInterval(() => {
setProgress((prev) => (prev >= 100 ? 0 : prev + 5));
}, 1000);
return () => clearInterval(interval);
}, []);
return (
<div className="flex items-center justify-center h-screen bg-background p-4">
<FlightStatusCard
airlineName="AIR CANADA"
airlineLogo={<PlaneTakeoff className="h-6 w-6 text-red-600" />}
planeImageSrc="https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-ofFaHj1aADhV9vhZ5kUv0TLyEblR1U.png&w=320&q=75" // Replace with your actual plane image URL
flightNumber="AC287"
gate="E7"
origin={{ city: 'Toronto', code: 'YYZ' }}
destination={{ city: 'Paris', code: 'CDG' }}
status={{ text: 'On Time', color: 'green' }}
boardingStatusText="Boarding"
boardingTimeLeft="5m left"
gateCloseTime="9:15 PM"
boardingStartTime="8:45 PM"
boardingEndTime="9:15 PM"
progressPercent={progress}
/>
</div>
);
};
export default FlightStatusCardDemo;