Components

    All major components, their responsibilities, props, and where they're used.

    HeroSection

    src/components/HeroSection.tsx

    Landing page with animated entrance, app branding, and "Plan a trip" CTA.

    Props

    NameTypeDescription
    onStart() => voidCalled when user taps "Plan a trip"
    Used in:Index.tsx

    AirbnbSearchBar

    src/components/AirbnbSearchBar.tsx

    Desktop 3-segment header search pill (Where / When / Advanced). Submitting generates the trip and routes into the planner. Replaces the removed TripSetupWizard modal.

    Props

    NameTypeDescription
    onSearch(data: TripSetupData) => voidCalled with setup data when the user submits the pill
    Used in:LandingHeader.tsxHeroSection.tsx

    MobileLandingSearchBar

    src/components/MobileLandingSearchBar.tsx

    Mobile/tablet variant of the header search bar — full-width segmented sheet with the same Where / When / Advanced flow.

    Props

    NameTypeDescription
    onSearch(data: TripSetupData) => voidCalled with setup data when the user submits
    Used in:AirbnbSearchBar.tsx

    PlannerSearchBar

    src/components/PlannerSearchBar.tsx

    Same 3-segment pill, bound to the active Trip. Lets the user rename the trip, re-pick dates, and edit advanced settings without re-running setup.

    Props

    NameTypeDescription
    tripTripCurrent trip
    onUpdate(trip: Trip) => voidPersists the edited trip
    Used in:MapPlanner.tsx

    GooglePlacesInput

    src/components/GooglePlacesInput.tsx

    Google Places autocomplete input with session-token rotation. Used inside the search bars and the add-stop dialog.

    Props

    NameTypeDescription
    placeholderstring?Input placeholder text
    valuestringCurrent value (synced to uncontrolled input)
    onChange(value: string) => voidCalled on text change or place selection
    onPlaceSelected(place: PlaceResult) => void?Optional callback with full place data
    Used in:AirbnbSearchBar.tsxMobileLandingSearchBar.tsxPlannerSearchBar.tsxAddStopDialog.tsx

    MapPlanner

    src/components/MapPlanner.tsx

    Main planner screen: full-screen map + floating search + collapsible itinerary sheet + add stop dialog.

    Props

    NameTypeDescription
    tripTripThe generated trip object
    onUpdateTrip(trip: Trip) => voidCallback to update trip state
    onBack() => voidNavigate back to setup
    Used in:Index.tsx

    GoogleMapView

    src/components/GoogleMap.tsx

    Renders Google Maps with start/end markers and optional selected location pin.

    Props

    NameTypeDescription
    tripTripTrip data for geocoding start/end
    selectedLocation{ lat, lng, name }?Optional pin from search
    classNamestring?CSS classes
    Used in:MapPlanner.tsx

    ItinerarySidebar

    src/components/ItinerarySidebar.tsx

    Desktop itinerary panel: day pills, metric summary, drag-reorderable stops, and inline stop editing.

    Props

    NameTypeDescription
    tripTripTrip data
    onAddStop(dayIndex: number) => voidOpen add stop dialog for a day
    onRemoveStop(dayIndex: number, stopId: string) => voidRemove a stop
    Used in:MapPlanner.tsx

    MobileItineraryBottomSheet

    src/components/MobileItineraryBottomSheet.tsx

    Mobile swipeable bottom sheet variant of the itinerary, including the AI co-pilot toggle.

    Props

    NameTypeDescription
    tripTripTrip data
    onAddStop(dayIndex: number) => voidOpen add stop dialog for a day
    onRemoveStop(dayIndex: number, stopId: string) => voidRemove a stop
    Used in:MapPlanner.tsx

    AddStopDialog

    src/components/AddStopDialog.tsx

    Bottom sheet form for adding a stop: location search, type, day, cost, notes, photo.

    Props

    NameTypeDescription
    tripTripTrip data for day list
    initialDaynumberPre-selected day index
    initialLocationstring?Pre-filled location name
    onClose() => voidClose the dialog
    onAdd(dayIndex: number, stop: TripStop) => voidSubmit the new stop
    Used in:MapPlanner.tsx

    StopCard

    src/components/StopCard.tsx

    Displays a single stop with type icon, name, description, and cost.

    Props

    NameTypeDescription
    stopTripStopStop data
    currencySymbolstringCurrency symbol for cost display
    Used in:ItinerarySidebar.tsxMobileItineraryBottomSheet.tsxDayCard.tsx

    DayCard

    src/components/DayCard.tsx

    Card for a single day showing stats (distance, fuel, cost) and stop list.

    Props

    NameTypeDescription
    dayTripDayDay data
    units'km' | 'miles'Distance unit
    currencystringCurrency code
    currencySymbolstringCurrency symbol
    Used in:DayBuilder.tsx