Components
Loading preview...
Fare Selector This component allows users to compare and select from multiple fare options, presented in an animated and responsive layout.
@ravikatiyar
npx shadcn@latest add https://21st.dev/r/ravikatiyar162/fare-selector// demo.tsx
import React, { useState } from 'react';
import { FareSelector, type FareOption } from '@/components/ui/fare-selector';
import {
XCircle,
CalendarDays,
Armchair,
Utensils,
Briefcase,
Luggage,
} from 'lucide-react';
// Sample data mirroring the structure from the image
const fareData: FareOption[] = [
{
id: 'regular',
title: 'REGULAR',
price: 4757,
offerText: 'Get ₹400 off with CTBBD',
details: [
{ label: 'Cancellation fee', value: 'from ₹4399', icon: XCircle },
{ label: 'Date change fee', value: 'from ₹3399', icon: CalendarDays },
{ label: 'Seat selection', value: 'Paid Seat', icon: Armchair },
{ label: 'Meal selection', value: 'Paid Meal', icon: Utensils },
{ label: 'Cabin bag/adult', value: '7 kg', icon: Briefcase },
{ label: 'Check-in bag/adult', value: '15 kg', icon: Luggage },
],
},
{
id: 'flexi',
title: 'FLEXI',
price: 5072,
offerText: 'Get ₹710 off with Axis/ICICI Cards',
isPopular: true,
details: [
{ label: 'Cancellation fee', value: 'from ₹2899', icon: XCircle },
{ label: 'Date change fee', value: 'from ₹400', icon: CalendarDays },
{ label: 'Seat selection', value: 'Free Seat', icon: Armchair },
{ label: 'Meal selection', value: 'Free Meal', icon: Utensils },
{ label: 'Cabin bag/adult', value: '7 kg', icon: Briefcase },
{ label: 'Check-in bag/adult', value: '15 kg', icon: Luggage },
],
},
{
id: 'super6e',
title: 'SUPER6E',
price: 6332,
offerText: 'Get ₹886 off with Axis/ICICI Cards',
details: [
{ label: 'Cancellation fee', value: 'from ₹1399', icon: XCircle },
{ label: 'Date change fee', value: 'from ₹400', icon: CalendarDays },
{ label: 'Seat selection', value: 'Free Seat', icon: Armchair },
{ label: 'Meal selection', value: 'Free Meal', icon: Utensils },
{ label: 'Cabin bag/adult', value: '7 kg', icon: Briefcase },
{ label: 'Check-in bag/adult', value: '20 kg', icon: Luggage },
],
},
];
const FareSelectorDemo = () => {
const [selectedFare, setSelectedFare] = useState<FareOption | null>(fareData[0]);
const handleSelectFare = (fare: FareOption | null) => {
console.log('Selected Fare:', fare);
setSelectedFare(fare);
};
const handleContinue = (fare: FareOption) => {
alert(`Continuing with ${fare.title} at a price of ₹${fare.price}`);
// Add navigation or API call logic here
};
return (
<div className="bg-background min-h-screen p-4">
<FareSelector
fares={fareData}
initialSelectedId="regular"
onSelect={handleSelectFare}
onContinue={handleContinue}
/>
<div className="mt-8 text-center text-sm text-muted-foreground">
<p>Current Selected Fare ID: <span className="font-bold text-foreground">{selectedFare?.id || 'None'}</span></p>
</div>
</div>
);
};
export default FareSelectorDemo;