Musafir Navbar

A customizable navbar component built with Material-UI.

Installation

npm install musafir-srp-navbar

Peer Dependencies

Make sure you have these dependencies installed in your project:

• React
• Material-UI
• React Router
• Redux (optional)
• Moment.js

Usage

import { SrpNavBar } from 'musafir-navbar';

function App() {
  return (
    <SrpNavBar 
      logo="/path/to/logo.png"
      origin="Dubai"
      destination="London"
      departureDate="15/06/23"
      returnDate="20/06/23"
      tripType="roundtrip"
      travellerCount={2}
      cabinClass="Business"
      routes={{ SRP: '/search-results' }}
    />
  );
}

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | logo | string | - | URL for the logo image | | origin | string | '' | Origin city name | | destination | string | '' | Destination city name | | departureDate | string | '' | Departure date in DD/MM/YY format | | returnDate | string | '' | Return date in DD/MM/YY format | | tripType | 'oneway' | 'roundtrip' | 'multicity' | 'oneway' | Type of trip | | travellerCount | number | 1 | Number of travellers | | cabinClass | string | 'Economy' | Cabin class name | | onLogoClick | function | - | Callback when logo is clicked | | onSearchClick | function | - | Callback when search icon is clicked | | onFilterClick | function | - | Callback when filter icon is clicked | | onDateChange | function | - | Callback when date is changed | | showLanguageSwitcher | boolean | true | Whether to show language switcher | | showSearchIcon | boolean | true | Whether to show search icon | | showFilterIcon | boolean | true | Whether to show filter icon | | routes | object | {} | Route definitions for the app |

License

MIT