Source: pages-sections/Routeplanner-Sections/TravelModeSelection.js

import { useState, useRef, useEffect } from "react";
import { makeStyles } from "@material-ui/core/styles";

import DirectionsBikeIcon from "@material-ui/icons/DirectionsBike";
import DirectionsRunIcon from "@material-ui/icons/DirectionsRun";

import CustomDropdown from "/components/CustomDropdown/CustomDropdown.js";
import styles from "/styles/jss/nextjs-material-kit/components/headerLinksStyle.js";
const useStyles = makeStyles(styles);

/**
 * The TravelModeSelection function is a component that allows users to select a travel mode (bicycling
 * or walking) with corresponding icons.
 * @param props - The `TravelModeSelection` component takes in the following props:
 * @returns The `TravelModeSelection` component is being returned. It is a functional component that
 * renders a `CustomDropdown` component with options for selecting different travel modes (BICYCLING
 * and WALKING). The selected travel mode is updated using the `setTravelMode` function passed as a
 * prop.
 */
export function TravelModeSelection(props) {
  const { travelMode, setTravelMode, ...rest } = props;
  const classes = useStyles();

  return (
    <CustomDropdown
      noLiPadding
      navDropdown
      buttonText="Travel Mode"
      buttonProps={{
        className: classes.navLink,
        color: "transparent",
      }}
      buttonIcon={travelMode.icon}
      dropdownList={[
        <a
          className={classes.dropdownLink}
          onClick={() => {
            setTravelMode({
              mode: "BICYCLING",
              icon: DirectionsBikeIcon,
            });
          }}
        >
          Cycle
        </a>,
        <a
          className={classes.dropdownLink}
          onClick={() => {
            setTravelMode({
              mode: "WALKING",
              icon: DirectionsRunIcon,
            });
          }}
        >
          Run
        </a>,
      ]}
    />
  );
}