Skip to content

Instantly share code, notes, and snippets.

@Karthik-B-06
Last active July 10, 2025 07:46
Show Gist options
  • Save Karthik-B-06/93934b105e05031a2d06e333a5d1213d to your computer and use it in GitHub Desktop.
Save Karthik-B-06/93934b105e05031a2d06e333a5d1213d to your computer and use it in GitHub Desktop.

Metro/Bus Ticket Components Documentation

Overview

This documentation covers a set of React Native components that work together to create a sophisticated ticket display interface for public transportation (Metro and Bus services). The system consists of three main components:

  1. TransitInfoCard - Main ticket information display
  2. TicketSplit - Passenger count breakdown
  3. TicketHeader - Ticket metadata display

Component Architecture

graph TD
    A[NewTicketUI] --> B[TransitInfoCard]
    A --> C[TicketSplit]
    A --> D[TicketHeader]
    B --> E[TransitInfoCardHeader]
    B --> F[PlaceCard]
    B --> G[TransformedText]
Loading

1. TransitInfoCard Component

Purpose

Displays detailed transit information for either Metro or Bus journeys, including route details, timings, and cost.

Props Interface

interface BaseTransitInfo {
    source: string;
    destination: string;
    regionalSourceTitle: string;
    regionalDestinationTitle: string;
    transitMessage: string;
    nextArrivalTime: string;
    validTill: string;
    transitMetaInfo: string;
    transitCost: number;
}

// Metro-specific interfaces
interface BaseMetroTransitInfo {
    mode: 'METRO';
    gateNo: number;
    platformNo: number;
}

interface DirectMetroTransitInfo extends BaseMetroTransitInfo, BaseTransitInfo {
    metroTransitType: 'DIRECT';
}

interface SwitchMetroTransitInfo extends BaseMetroTransitInfo, BaseTransitInfo {
    metroTransitType: 'SWITCH';
    sourceMessage: string;
    switchStation: string;
    switchStationRegionalTitle: string;
    sourceLine: string;
    sourceLineColorCode: string;
    switchPlatformNo: number;
    destinationMessage: string;
    destinationLine: string;
    destinationLineColorCode: string;
}

// Bus-specific interface
interface BusTransitInfo extends BaseTransitInfo {
    mode: 'BUS';
    busNo: string;
}

Key Features

  • Supports both Metro and Bus transit types
  • Handles direct metro routes and routes with line switches
  • Displays bilingual information (English and regional language)
  • Shows real-time transit information
  • Includes visual indicators for metro lines
  • Provides platform and gate information for metro journeys

Visual Elements

  • Transit mode icon with color coding
  • Cost display
  • Source and destination cards
  • Platform/Gate information
  • Next arrival time
  • Ticket validity period
  • Line indicators for metro routes
  • Switch station information for metro routes with transfers

2. TicketSplit Component

Purpose

Displays the breakdown of passengers by category (Adult and Child).

Props Interface

interface TicketSplitProps {
    adultCount: number;
    childCount: number;
}

Key Features

  • Clean, two-column layout
  • Separate counters for adults and children
  • Consistent styling with the main ticket design

3. TicketHeader Component

Purpose

Displays essential ticket metadata and identification information.

Props Interface

interface TicketHeaderProps {
    title: string;
    regionalTitle: string;
    date: string;
    id: string;
    ticketCount: number;
}

Key Features

  • Bilingual title display
  • Date information
  • Ticket ID
  • Total passenger count with icon
  • Centered layout with dividers

Styling Approach

The components use a consistent styling approach with:

  • Tailwind CSS for styling
  • Custom fonts (Area Normal, Departure Mono, Inter)
  • Responsive layouts
  • Consistent color scheme
  • Proper spacing and alignment

Usage Examples

<TransitInfoCard
    mode="METRO"
    metroTransitType="SWITCH"
    source="Majestic"
    destination="Whitefield"
    gateNo={4}
    platformNo={2}
    transitCost={45}
    // ... other required props
/>

<TicketSplit
    adultCount={2}
    childCount={1}
/>

<TicketHeader
    title="Metro Ticket"
    regionalTitle="ಮೆಟ್ರೋ ಟಿಕೆಟ್"
    date="2024-03-21"
    id="MT123456"
    ticketCount={3}
/>

Usage Example inside the FLOW.tsx file

        <NewTicketUI
            ticketHeaderProps={{
                date: '10-07-2025',
                id: '123',
                ticketCount: 1,
                title: 'Namma Metro',
                regionalTitle: 'ನಮ್ಮ ಮೆಟ್ರೋ',
            }}
            transitInfoCardProps={{
                mode: 'METRO',
                source: 'Majestic',
                destination: 'MG Road',
                regionalSourceTitle: 'ಮಜೆಸ್ಟಿಕ್',
                regionalDestinationTitle: 'ಎಂ.ಜಿ ರಸ್ತೆ',
                transitMessage: 'Board Purple Line metro from Platform 2',
                nextArrivalTime: '10:30 AM',
                validTill: '11:30 AM',
                transitMetaInfo: 'SWITCH',
                transitCost: 30,
                gateNo: 2,
                platformNo: 2,
                metroTransitType: 'DIRECT',
                sourceMessage: 'Board Purple Line metro from Platform 2',
                switchStation: 'Majestic',
                switchStationRegionalTitle: 'ಮಜೆಸ್ಟಿಕ್',
                sourceLine: 'BLUE',
                sourceLineColorCode: '#016ACD',
                switchPlatformNo: 2,
                destinationMessage: 'Board Purple Line metro from Platform 2',
                destinationLine: 'PURPLE',
                destinationLineColorCode: '#800080',
            }}
            ticketSplitProps={{
                adultCount: 1,
                childCount: 0,
            }}
        />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment