Fare Selector

Pricing 38

About

Fare Selector This component allows users to compare and select from multiple fare options, presented in an animated and responsive layout.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Fare Selector to your project and fits it to your theme.

Code

How Fare Selector is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

// 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;