JourneyBreakdownItem Component

Direct Flight

A simple direct flight from Barcelona to London with all flight details including departure and arrival information.

Barcelona - London

10:30

Fri,

15 Mar

BarcelonaJosep Tarradellas Barcelona-El Prat Airport (BCN)Terminal T1Flight duration: 2h 15m

12:45

Fri,

15 Mar

LondonLondon Heathrow Airport (LHR)Terminal T5

British AirwaysFlight BA476Aircraft: Boeing 787-9

Basic EconomyFare Code: TPROMO

A connecting flight from Barcelona to New York with a layover in London. Shows layover information and different operating airline.

London - New York

Layover in London: 2h 35m

15:20

Fri,

15 Mar

LondonLondon Heathrow Airport (LHR)Terminal T5Flight duration: 3h 25m

18:45

Fri,

15 Mar

New YorkJohn F. Kennedy International Airport (JFK)Terminal T8

British AirwaysFlight AA100Aircraft: Boeing 777-300EROperated by American Airlines

Premium EconomyFare Code: FLEX

An overnight flight that arrives the next day, demonstrating date difference display and long-haul flight duration.

Barcelona - Sydney

22:15

Fri,

15 Mar

BarcelonaJosep Tarradellas Barcelona-El Prat Airport (BCN)Terminal T1Flight duration: 1d 8h 15m

06:30

+1 Sun,

17 Mar

SydneySydney Kingsford Smith Airport (SYD)Terminal T1

Qantas AirwaysFlight QF25Aircraft: Airbus A350-1000

Business ClassFare Code: BUSINESS

The JourneyBreakdownItem component includes:

Flight Information: Complete departure and arrival details with times and terminals
Date Handling: Automatic detection of next-day arrivals and date differences
Layover Support: Display of layover information for connecting flights
Airline Details: Shows both marketing and operating airlines when different
Flight Duration: Automatically calculated flight duration
Fare Information: Display of fare class and fare code
Interactive Elements: Seat preview button with customizable action
Theme Support: Full dark/light mode compatibility
Accessibility: Proper ARIA labels and keyboard navigation
Responsive Design: Adapts to different screen sizes