# Airline Front End

## Run the following

npm i bootstrap moment axios react-router-dom --save

## WebConfig

Our final utility is the WebConfig class. This is going to allow us to send request from the same URL (aka CORS). We will learn more about this, and expand this class when we learn to secure our API. For now we will keep it simple.

@Configuration
@EnableWebMvc
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**");
    }
}

## Components

### Flight.js

import React from 'react';
import moment from "moment";
function Flight({flight}) {
    let USD = new Intl.NumberFormat('en-US', {
        style: 'currency',
        currency: 'USD',
    });

    let depart= moment.unix(flight.departureDateTime.seconds);
    let returnD = moment.unix(flight.arrivalDateTime.seconds);
    let price = Math.round(flight.mileage/2.34, 2);

    return (
        <div className="row">
            <div className="col">
                <h4>{flight.departureAirport}</h4>
                <p style={{marginBottom: 0}}>{depart.format("hh:mm A")}</p>
                <p>2h 38m</p>
            </div>
            <div className="col-1 col-xxl-1 d-xxl-flex justify-content-xxl-center align-items-xxl-center"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" className="bi bi-arrow-right d-xxl-flex justify-content-xxl-start align-items-xxl-start" style={{fontSize: "42px"}}>
                <path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"></path>
            </svg></div>
            <div className="col">
                <h4>{flight.arrivalAirport}</h4>
                <p style={{marginBottom: 0}}>{returnD.format("hh:mm A")}</p>
                <p>Nonstop</p>
            </div>
            <div className="col">
                <p style={{fontWeight: "bold",marginBottom: 0, textAlign: "right"}}>Round Trip from</p>
                <p style={{marginBottom: "10px", textAlign: "right"}}><a className="text-end" href="#" style={{textDecoration: "underline"}}>{USD.format(price)}&nbsp;<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" className="bi bi-chevron-right">
                    <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"></path>
                </svg></a></p>
                <p><a href="#">Details</a></p>
            </div>
        </div>
    );
}

export default Flight;

### Footer.js

import React from 'react';
import logo from '../img/BB Airlines.png'
function Footer(props) {
    return (
        <footer >
            <div className="container py-4 py-lg-5">
                <div className="row justify-content-center">
                    <div className="col-sm-4 col-md-3 text-center text-lg-start d-flex flex-column item">
                        <h3 className="fs-6">Help</h3>
                        <ul className="list-unstyled">
                            <li><a className="link-secondary" href="#">Contact BB Airlines</a></li>
                            <li><a className="link-secondary" href="#">Receipts and refunds</a></li>
                            <li><a className="link-secondary" href="#">FAQs</a></li>
                            <li><a className="link-secondary" href="#">Bags and optional fees</a></li>
                        </ul>
                    </div>
                    <div className="col-sm-4 col-md-3 text-center text-lg-start d-flex flex-column item">
                        <h3 className="fs-6">About</h3>
                        <ul className="list-unstyled">
                            <li><a className="link-secondary" href="#">About us</a></li>
                            <li><a className="link-secondary" href="#">Join our team!</a></li>
                            <li><a className="link-secondary" href="#">Legal, privacy, copyright</a></li>
                            <li><a className="link-secondary" href="#">Newsroom</a></li>
                        </ul>
                    </div>
                    <div className="col-sm-4 col-md-3 text-center text-lg-start d-flex flex-column item">
                        <h3 className="fs-6" style={{fontFamily: "'IBM Plex Sans', sans-serif"}}>Extras</h3>
                        <ul className="list-unstyled">
                            <li><a className="link-secondary" href="#">Business programs</a></li>
                            <li><a className="link-secondary" href="#">Gift Cards</a></li>
                            <li><a className="link-secondary" href="#">BB Airlines credit card</a></li>
                            <li><a className="link-secondary" href="#">Trip Insurance</a></li>
                        </ul>
                    </div>
                    <div className="col-lg-3 text-center text-lg-start d-flex flex-column align-items-center order-first align-items-lg-start order-lg-last item social">
                        <div className="fw-bold d-flex align-items-center mb-2"></div><img className="img-fluid" src={logo} />
                    </div>
                </div>
                <hr />
                <div className="d-flex justify-content-between align-items-center pt-3">
                    <p className="text-muted mb-0">Copyright © 2023 Belizean Breeze Airlines</p>
                    <ul className="list-inline mb-0">
                        <li className="list-inline-item"><svg className="bi bi-facebook" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16">
                            <path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z"></path>
                        </svg></li>
                        <li className="list-inline-item"><svg className="bi bi-twitter" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16">
                            <path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"></path>
                        </svg></li>
                        <li className="list-inline-item"><svg className="bi bi-instagram" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16">
                            <path d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.917 3.917 0 0 0-1.417.923A3.927 3.927 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.916 3.916 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.926 3.926 0 0 0-.923-1.417A3.911 3.911 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0h.003zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599.28.28.453.546.598.92.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.47 2.47 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.478 2.478 0 0 1-.92-.598 2.48 2.48 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233 0-2.136.008-2.388.046-3.231.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045v.002zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92zm-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217zm0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334z"></path>
                        </svg></li>
                    </ul>
                </div>
            </div>
        </footer>
    );
}

export default Footer;

### Menu

import React from 'react';
import logo from '../img/BB Airlines.png';
import {Link} from 'react-router-dom';

function Menu(props) {
    return (
        <nav className="navbar navbar-expand-md bg-body py-3">
            <div className="container"><a className="navbar-brand d-flex align-items-center" href="#"><img src={logo} width="47" height="51" /><span style={{fontWeight: "bold",color: "#08338c"}}>Belizean Breeze Airlines</span></a><button className="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navcol-2"><span className="visually-hidden">Toggle navigation</span><span className="navbar-toggler-icon"></span></button>
                <div id="navcol-2" className="collapse navbar-collapse">
                    <ul className="navbar-nav ms-auto">
                        <li className="nav-item"></li>
                        <li className="nav-item"><Link to="/register" className="nav-link" href="#">Register</Link></li>
                        <li className="nav-item"><Link to="/" className="nav-link" href="#">Login</Link></li>
                    </ul>
                </div>
            </div>
        </nav>
    );
}

export default Menu;

## Pages

### Home

import React, {useEffect, useRef, useState} from 'react';
import auckland from '../img/Travel Images-3-Auckland.png';
import bali from '../img/Travel Images-1-Bali.png';
import london from '../img/Travel Images-2-London.png';
import axios from "axios";
import moment from "moment";
import {useNavigate} from "react-router-dom";
function Home(props) {
    let [airports, setAirports] = useState([]);
    const fromAirport = useRef("ATL");
    const toAirport = useRef("JFK");
    const passengers = useRef(1);
    const departDate = useRef("");
    const returnDate = useRef("");
    const navigate =     useNavigate();
    let today = moment();
    const handleSearch = (e)=>{
        e.preventDefault();
        navigate("/list",{state: {from: fromAirport.current.value, to: toAirport.current.value, passengers: passengers.current.value,departDate: departDate.current.value, returnDate: returnDate.current.value}});


    }

    useEffect(() => {
        const getAirports = async () => {
            await axios.get("http://localhost:8080/airport").then( (res)=>{

                let list = [];
                for(let airport of res.data.data)
                {
                    list.push(airport.airportCode);
                }
                list.sort((a, b)=> {
                    return a.airportCode < b.airportCode ? -1 : (a.airportCode > b.airportCode ? 1 : 0);
                });

                setAirports(list);
            }).catch((e)=>{
                console.log(e);
            });


        }
        getAirports();
    }, []);

    return (
        <>
            <section className="container" style={{paddingRight:0, paddingLeft:0}}>
                <div className="hero">
                    <div className="container h-100">
                        <div className="row h-100">
                            <div className="col-md-6 col-xl-8 text-center text-md-start d-flex d-sm-flex d-md-flex justify-content-center align-items-center justify-content-md-start align-items-md-center justify-content-xl-center">
                                <div style={{maxWwidth: "none",width: "95%"}}>
                                    <div className="card" style={{width: "auto"}}>
                                        <div className="card-header bz-nav">
                                            <ul className="nav nav-tabs nav-justified card-header-tabs" role="tablist">
                                                <li className="nav-item" role="presentation"><a className="nav-link active" href="#" data-bs-toggle="tab" data-bs-target="#book" aria-selected="true" aria-controls="book" role="tab">Book</a></li>
                                                <li className="nav-item" role="presentation"><a className="nav-link" href="#" data-bs-toggle="tab" data-bs-target="#manage" aria-selected="false" aria-controls="manage" role="tab">Manage Trip/Check-in</a></li>
                                                <li className="nav-item" role="presentation"><a className="nav-link" href="#" data-bs-toggle="tab" data-bs-target="#status" aria-selected="false" aria-controls="status" role="tab">Flight Status</a></li>
                                            </ul>
                                        </div>
                                        <div className="card-body tab-content">
                                            <div id="book" className="tab-pane fade show active" role="tabpanel">
                                                <form>
                                                    <div className="row">
                                                        <div className="col">
                                                            <div className="form-check form-check-inline"><input id="formCheck-1" className="form-check-input" type="radio" name="way" checked="checked" /><label className="form-check-label" htmlFor="formCheck-1">Round trip</label></div>
                                                            <div className="form-check form-check-inline"><input id="formCheck-2" className="form-check-input" type="radio" name="way" /><label className="form-check-label" htmlFor="formCheck-2">One way</label></div>
                                                        </div>
                                                    </div>
                                                    <div className="row">
                                                        <div className="col-sm-12 col-md-4"><label className="form-label">From</label><select ref={fromAirport} id="fromAirport" className="form-select">
                                                            <optgroup label="Airports">

                                                                {
                                                                    airports.map((code, i)=>{
                                                                        return (
                                                                            <option key={i} value={code}>{code}</option>
                                                                        )
                                                                    })
                                                                }
                                                            </optgroup>
                                                        </select></div>
                                                        <div className="col-sm-12 col-md-4"><label className="form-label">To</label><select ref={toAirport} id="toAirport" className="form-select">
                                                            <optgroup label="Airports">
                                                                {
                                                                    airports.map((code, i)=>{
                                                                        let selected = i == 1 ? "selected" :"";
                                                                        return (
                                                                            <option key={i} selected={selected} value={code}  >{code}</option>
                                                                        )
                                                                    })
                                                                }

                                                            </optgroup>
                                                        </select></div>
                                                        <div className="col-sm-12 col-md-4"><label className="form-label">Number of passengers</label><select ref={passengers} id="passengers" className="form-select">
                                                            <option value="1" selected>1</option>
                                                            <option value="2">2</option>
                                                            <option value="3">3</option>
                                                            <option value="4">4</option>
                                                            <option value="5">5</option>
                                                            <option value="6">6</option>
                                                        </select></div>
                                                    </div>
                                                    <div className="row">
                                                        <div className="col-sm-12 col-md-4"><label className="form-label">Depart</label><input ref={departDate} id="depart" className="form-control" type="date" /></div>
                                                        <div id="return-col" className="col-sm-12 col-md-4"><label className="form-label">Return</label><input ref={returnDate} id="return" className="form-control" type="date" /></div>
                                                        <div className="col-sm-12 col-md-4 position-relative"><button id="search" className="btn btn-primary btn-lg position-absolute top-50 start-50 translate-middle" type="button" onClick={handleSearch}>Search</button></div>
                                                    </div>
                                                </form>
                                            </div>
                                            <div id="manage" className="tab-pane fade" role="tabpanel">
                                                <form>
                                                    <div className="row">
                                                        <div className="col"><label className="form-label">Passenger Last Name</label><input id="lastName" className="form-control" type="text" placeholder="Last Name" name="lastName" /></div>
                                                        <div className="col"><label className="form-label">Record Locator</label><input id="locator" className="form-control" type="text" name="locator" placeholder="Record Locator" /></div>
                                                    </div>
                                                    <div className="row mt-2">
                                                        <div className="col d-grid gap-2 d-md-flex justify-content-md-end"><button
                                                            id="find" className="btn btn-primary align-items-end" type="button">Find Your Trip</button></div>
                                                    </div>
                                                </form>
                                            </div>
                                            <div id="status" className="tab-pane fade" role="tabpanel">
                                                <p>Search by:</p>
                                                <div>
                                                    <ul className="nav nav-pills statusPills" role="tablist">
                                                        <li className="nav-item" role="presentation"><a className="nav-link" role="tab" data-bs-toggle="pill" href="#cities">Cities</a></li>
                                                        <li className="nav-item" role="presentation"><a className="nav-link active" role="tab" data-bs-toggle="pill" href="#flightNum">Flight Number</a></li>
                                                    </ul>
                                                    <div className="tab-content mt-2">
                                                        <div id="cities" className="tab-pane" role="tabpanel">
                                                            <div className="row">
                                                                <div className="col"><label className="form-label">From</label><select id="citiesFrom" className="form-select">
                                                                    <optgroup label="Airports">
                                                                        {
                                                                            airports.map((code, i)=>{
                                                                                return (
                                                                                    <option key={i} value={code}>{code}</option>
                                                                                )
                                                                            })
                                                                        }
                                                                    </optgroup>
                                                                </select></div>
                                                                <div className="col"><label className="form-label">To</label><select id="citiesTo" className="form-select">
                                                                    <optgroup label="Airports">
                                                                        {
                                                                            airports.map((code, i)=>{
                                                                                return (
                                                                                    <option key={i} value={code}>{code}</option>
                                                                                )
                                                                            })
                                                                        }
                                                                    </optgroup>
                                                                </select></div>
                                                                <div className="col"><label className="form-label">Date</label><select id="citiesDate" className="form-select">
                                                                    {

                                                                        [-1,0,1,2,3].map((val, idx)=>{
                                                                            let date = val < 0 ? today.subtract(1, 'days'): today.add(1,'days');
                                                                            return <option key={idx} value={date.format('YYYY-MM-DD')}>{date.format('MMMM D, YYYY')}</option>
                                                                    })

                                                                    }

                                                                </select></div>
                                                            </div>
                                                            <div className="row mt-2">
                                                                <div className="col d-grid gap-2 d-md-flex justify-content-md-end"><button id="citiesSearch" className="btn btn-primary" type="button">Search</button></div>
                                                            </div>
                                                        </div>
                                                        <div id="flightNum" className="tab-pane active" role="tabpanel">
                                                            <form>
                                                                <div className="row">
                                                                    <div className="col"><label className="form-label">Flight Number</label><input id="flightNumber" className="form-control" type="text" placeholder="Flight Number" name="flightNumber" /></div>
                                                                    <div className="col"><label className="form-label">Date</label><select id="flightDate" className="form-select">
                                                                        {

                                                                            [-1,0,1,2,3].map((val, idx)=>{
                                                                                let date = val < 0 ? today.subtract(1, 'days'): today.add(1,'days');
                                                                                return <option key={idx} value={date.format('YYYY-MM-DD')}>{date.format('MMMM D, YYYY')}</option>
                                                                            })

                                                                        }
                                                                    </select></div>
                                                                    <div className="col position-relative"><button id="flightSearch" className="btn btn-primary position-absolute top-50 start-50 translate-middle" type="button">Search</button></div>
                                                                </div>
                                                            </form>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <div className="container" style={{background: "#f7f5fb",paddingBottom:"40px",paddingTop: "30px"}}>
                <div className="row">
                    <div className="col-md-12">
                        <h1 className="display-4 text-uppercase" style={{textAlign: "center",fontFamily: "'Bebas Neue', sans-serif"}}>Special Offers</h1>
                    </div>
                </div>
                <div className="row g-0">
                    <div className="col-auto col-md-4" style={{background: "transparent"}}><img className="img-fluid" src={bali} alt="Bali March 6 to 10. from $450" /></div>
                    <div className="col-md-4"><img className="img-fluid" src={london} /></div>
                    <div className="col-md-4"><img className="img-fluid" src={auckland} /></div>
                </div>
            </div>
            <div className="container">
                <div className="row">
                    <div className="col">
                        <div className="card" style={{borderStyle: "none"}}>
                            <div className="card-body">
                                <h4 className="card-title"><br />🌟 Unlock Paradise with BlissPoints! 🌴✈️<br /><br /></h4>
                                <p className="card-text">✈️ <em>Elevate Your Travel Experience</em>: Enjoy the sweet taste of paradise with every flight. Accumulate BlissPoints effortlessly as you explore the breathtaking destinations served by Belizean Breeze Airlines.<br /><br />🎁 <em>Exclusive Rewards &amp; Perks</em>: Dive into a world of privileges! From priority boarding to complimentary upgrades, your BlissPoints will open the door to a range of exclusive benefits designed to enhance your travel experience.<br /><br />💼 <em>Travel Smarter, Save More</em>: Say goodbye to travel worries and hello to savings! Redeem your BlissPoints for discounted fares, hotel stays, and other travel essentials, ensuring that your journey is not only memorable but also budget-friendly.<br /><br />🌐<em> Global Partnerships</em>: Extend the reach of your BlissPoints across a network of partners worldwide. Whether it&#39;s booking a dream vacation or indulging in shopping sprees, our partnerships ensure that your rewards are as diverse as your travel aspirations.</p><a className="card-link" href="#">Sign Up Today!</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </>
    );
}

export default Home;

### SearchList.js

import React, {useEffect, useState} from 'react';
import {useLocation} from "react-router-dom";
import banner from "../img/Travel Advert Banner.png";
import axios from "axios";
import Flight from "../components/Flight";

function SearchList(props) {
    const {state} = useLocation();
    const { from, to, passengers, departDate, returnDate } = state;

    const [flights, setFlights] = useState([]);

    useEffect(() => {
        const getFlights = ()=>{
            axios.get("http://localhost:8080/flight").then((res)=>{
               let list = [];
               for(let flight of res.data.data)
               {
                   list.push(flight);
               }
               setFlights(list);
            })
        }
        getFlights();
    }, []);

    return (
        <>
            <div className="container">
                <div className="row">
                    <div className="col">
                        <h1>Choose flights</h1>
                    </div>
                </div>
                <div className="row">
                    <div className="col" style={{paddingRight: "0",paddingLeft: "0"}}><img alt="banner" className="img-fluid" src={banner} width="1320" height="385"/></div>
                </div>
                <div className="row mt-3 mb-3">
                    <div className="col-md-auto col-lg-4" id="left">
                        <div className="row">
                            <div className="col">
                                <div className="card filterCard" style={{boxShadow: "4px 4px var(--bs-gray-200)"}}>
                                    <div className="card-header">
                                        <h4 className="float-start"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" className="bi bi-filter">
                                            <path d="M6 10.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"></path>
                                        </svg>&nbsp;Sort by</h4><a className="float-end" href="#">Reset</a>
                                    </div>
                                    <div className="card-body">
                                        <div className="accordion" role="tablist" id="accordion-price">
                                            <div className="accordion-item">
                                                <h2 className="accordion-header" role="tab"><button className="accordion-button bg-white" type="button" data-bs-toggle="collapse" data-bs-target="#accordion-price .item-1" aria-expanded="true" aria-controls="accordion-price .item-1">Price</button></h2>
                                                <div className="accordion-collapse collapse show item-1" role="tabpanel" data-bs-parent="#accordion-price">
                                                    <div className="accordion-body">
                                                        <div className="form-check"><input className="form-check-input" type="radio" id="formCheck-1" name="price" value="lowest"/><label className="form-check-label" htmlFor="formCheck-1">Lowest price</label></div>
                                                        <div className="form-check"><input className="form-check-input" type="radio" id="formCheck-2" name="price" value="highest"/><label className="form-check-label" htmlFor="formCheck-2">Highest price</label></div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div className="row mt-3">
                            <div className="col">
                                <div className="card filterCard" style={{boxShadow: "4px 4px var(--bs-light-border-subtle)"}}>
                                    <div className="card-header">
                                        <h4 className="float-start"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" className="bi bi-funnel">
                                            <path d="M1.5 1.5A.5.5 0 0 1 2 1h12a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.128.334L10 8.692V13.5a.5.5 0 0 1-.342.474l-3 1A.5.5 0 0 1 6 14.5V8.692L1.628 3.834A.5.5 0 0 1 1.5 3.5v-2zm1 .5v1.308l4.372 4.858A.5.5 0 0 1 7 8.5v5.306l2-.666V8.5a.5.5 0 0 1 .128-.334L13.5 3.308V2h-11z"></path>
                                        </svg>&nbsp;Filters</h4><a className="float-end" href="#">Reset</a>
                                    </div>
                                    <div className="card-body">
                                        <div className="accordion" role="tablist" id="accordion-filter">
                                            <div className="accordion-item">
                                                <h2 className="accordion-header" role="tab"><button className="accordion-button bg-white" type="button" data-bs-toggle="collapse" data-bs-target="#accordion-filter .item-1" aria-expanded="true" aria-controls="accordion-filter .item-1">No. of transit</button></h2>
                                                <div className="accordion-collapse collapse show item-1" role="tabpanel" data-bs-parent="#accordion-filter">
                                                    <div className="accordion-body">
                                                        <div className="form-check"><input className="form-check-input" type="checkbox" id="formCheck-3" value="direct" name="chkTransit"/><label className="form-check-label" htmlFor="formCheck-3">Direct</label></div>
                                                        <div className="form-check"><input className="form-check-input" type="checkbox" id="formCheck-4" name="chkTransit" value="1"/><label className="form-check-label" htmlFor="formCheck-4">1 transit</label></div>
                                                        <div className="form-check"><input className="form-check-input" type="checkbox" id="formCheck-5" name="chkTransit" value="2"/><label className="form-check-label" htmlFor="formCheck-5">2 transits</label></div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div className="accordion-item">
                                                <h2 className="accordion-header" role="tab"><button className="accordion-button collapsed bg-white" type="button" data-bs-toggle="collapse" data-bs-target="#accordion-filter .item-2" aria-expanded="false" aria-controls="accordion-filter .item-2">Transit duration</button></h2>
                                                <div className="accordion-collapse collapse item-2" role="tabpanel" data-bs-parent="#accordion-filter">
                                                    <div className="accordion-body"><input className="form-range" type="range" min="1" max="30" value="4" step="1" name="duration"/></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div className="col" id="right">
                        <div className="row">
                            <div className="col"><select id="direction" className="form-select">
                                <option value="one">One way</option>
                                <option value="two">Round trip</option>
                            </select></div>
                            <div className="col">
                                <div className="input-group"><span className="input-group-text" style={{background: "var(--bs-body-bg", bordeRightStyle: "none"}}><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none">
                                    <path d="M17 20H22V18C22 16.3431 20.6569 15 19 15C18.0444 15 17.1931 15.4468 16.6438 16.1429M17 20H7M17 20V18C17 17.3438 16.8736 16.717 16.6438 16.1429M7 20H2V18C2 16.3431 3.34315 15 5 15C5.95561 15 6.80686 15.4468 7.35625 16.1429M7 20V18C7 17.3438 7.12642 16.717 7.35625 16.1429M7.35625 16.1429C8.0935 14.301 9.89482 13 12 13C14.1052 13 15.9065 14.301 16.6438 16.1429M15 7C15 8.65685 13.6569 10 12 10C10.3431 10 9 8.65685 9 7C9 5.34315 10.3431 4 12 4C13.6569 4 15 5.34315 15 7ZM21 10C21 11.1046 20.1046 12 19 12C17.8954 12 17 11.1046 17 10C17 8.89543 17.8954 8 19 8C20.1046 8 21 8.89543 21 10ZM7 10C7 11.1046 6.10457 12 5 12C3.89543 12 3 11.1046 3 10C3 8.89543 3.89543 8 5 8C6.10457 8 7 8.89543 7 10Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                </svg></span><input className="form-control" type="number" id="passengers" style={{borderLeftStyle: "none"}} min="1" value="1" max="8" step="1" /></div>
                            </div>
                            <div className="col"><select id="seatclassName" className="form-select">
                                <option value="business" selected="">Business</option>
                                <option value="main" selected="">Main</option>
                                <option value="basic">Basic</option>
                            </select></div>
                        </div>
                        <div className="row">
                            <div className="col"><label className="form-label">From</label><input type="text" id="from" className="form-control" value="LAX"/></div>
                            <div className="col"><label className="form-label">To</label><input type="text" id="to" className="form-control" value="ORD"/></div>
                            <div className="col d-xxl-flex justify-content-xxl-center align-items-xxl-center"><button className="btn btn-primary text-center d-xxl-flex justify-content-xxl-start align-items-xxl-start" id="search" type="button">Search</button></div>
                        </div>
                        <div className="row mt-3">
                            <div className="col">
                                <div className="resultTabs">
                                    <ul className="nav nav-tabs" role="tablist">
                                        <li className="nav-item" role="presentation"><a className="nav-link active text-start" role="tab" data-bs-toggle="tab" href="#tab-1">Sun, Dec 3<br/>400 USD</a></li>
                                        <li className="nav-item" role="presentation"><a className="nav-link" role="tab" data-bs-toggle="tab" href="#tab-2">Mon, Dec 4<br/>425 USD</a></li>
                                        <li className="nav-item" role="presentation"><a className="nav-link" role="tab" data-bs-toggle="tab" href="#tab-3">Tue, Dec 5<br/>375 USD</a></li>
                                    </ul>
                                    <div className="tab-content">
                                        <div className="tab-pane active" role="tabpanel" id="tab-1">
                                            {
                                                flights.map((f)=>{
                                                    return <Flight flight={f} />
                                                })
                                            }
                                        </div>
                                        <div className="tab-pane" role="tabpanel" id="tab-2">
                                            {
                                                flights.map((f)=>{
                                                    return <Flight flight={f} />
                                                })
                                            }
                                        </div>
                                        <div className="tab-pane" role="tabpanel" id="tab-3">
                                            {
                                                flights.map((f)=>{
                                                    return <Flight flight={f} />
                                                })
                                            }
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </>
    );
}

export default SearchList;

### App.js

import './App.css';
import Menu from "./components/Menu";
import Home from "./pages/Home";
import Footer from "./components/Footer";
import {BrowserRouter as Router, Routes, Route} from "react-router-dom";
import SearchList from "./pages/SearchList";

function App() {
  return (
    <Router>
        <Menu />
        <Routes>
            <Route element={<Home />} path="/" index/>
            <Route element={<SearchList/>} path="/list" />
        </Routes>

      <Footer/>
    </Router>
  );
}

export default App;

## App.css

.hero{
  height: 600px;
  background: url("img/AdobeStock_196821190.jpeg") center / cover;
}

footer h3 {
  padding-bottom: 15px;
  border-bottom: #000 solid 1px;
  font-size: 1.286rem;
  font-weight: 400;
}

body {
  font-family: 'IBM Plex Sans', sans-serif;
}

#search, #find, #citiesSearch, #flightSearch {
  text-align: center;
  background: #08338c;
  border-color: #08338c;
}

.bz-nav, .statusPills .nav-link.active {
  background: #a18b48 !important;
  border-color: #a18b48 !important;
}

.bz-nav a {
  color: #f7f5fb !important;
}

.bz-nav .nav-item:hover a {
  color: #f7f5fb !important;
  background-color: #08338c !important;
}

.bz-nav .nav-link.active {
  color: #08338c !important;
  font-weight: 700 !important;
}

h1, h2, h3, h4, h5, h6 {
  color: #08338c;
}

.filterCard .card-header {
  background-color: #fff !important;
}

.filterCard a {
  color: #000000;
  text-decoration: none;
}

.accordion-header {
  background-color: #ffffff !important;
}

.accordion-button:not(.collapsed) {
  box-shadow: none;
}

.resultTabs .nav-tabs {
  background: #08338c;
  border-color: #08338c;
}

.resultTabs .nav-link.active {
  background-color: #a18b48;
  color: #ffffff;
  border-color: #a18b48;
  text-align: center;
}

.resultTabs .nav-tabs a {
  color: #fff;
  text-align: center;
}

footer{
  max-width: none;
  min-width: inherit;
  width: 100%;
  background: #f7f5fb;
  margin-left: 0;
}

## index.css

@import url("https://fonts.googleapis.com/css?family=Bebas+Neue&display=swap");
@import url("https://fonts.googleapis.com/css?family=IBM+Plex+Sans&display=swap");
@import url("https://fonts.googleapis.com/css?family=Lato&display=swap");

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}