One of the first things that was necessary when creating the web application was the navigation bar:

The navigation bar uses HeroIcons for its images and React's routing module: react-router-dom

If someone wants to add a page to the project, then they must go to App.tsx and add it as a Route:

First, import the Page

import <PageName> from "@/scenes/<pagename>";

Second, find where all the routes are in the return area and add it as a route with the proper syntax:

<Route path="/<pagename>" element={<<PageName> />}/>

To add a Link to a page, use the Link element

<Link to="/<pagename>">
    Link
</Link>

If you wish to use a button, then you can simply have it as an inner element

<Link to="/<pagename>">
     <button> 
         Link
     </button> 
</Link>

The profile's front end is composed of a greeting for the user along with their respective rating.

This page also includes a simple settings page and a toggle button for offline and online.

Since there is currently no backend, the online/offline button does nothing more than what you see visually

Eventually, this will change the status of the user making them available for rides.

We define a simple structure to control the button.

const [offlineStatus, onlineStatus] = useState(false);

const handleStatusClick = () => { 
    onlineStatus(!offlineStatus)

Then simply toggle when a click is registered.

<div className='flex justify-center items-start'>
    <button 
        className={`text-3xl p-5 font-bold text-primary-black  rounded-full focus:outline-none mt-24 ${offlineStatus ? 'bg-primary-red' : 'bg-primary-green'}`}
        onClick={handleStatusClick}>
        {offlineStatus ? 'Offline' : 'Online'}
     </button>
</div>