Building Planning page components : Part 2

<MapsBoard/>

The name is maps-board because in the next versions of this course we’ll be adding a maps API, where users can select a location on the app to add to the trips board, rather than having it filled manually.

Let’s look at the end result for this component first,

MapsBoard.jsx

Here also we have a child component <DestinationForm/>, let’s start building stateless components with structures only, later we’ll make them interactive using states and methods.

<DestinationForm/>

For now, we just need to create the form and how it looks on the screen. The form contains three input elements and a button, everything is wrapped inside <div> before <form> element, for the styling purpose.

import { AiOutlinePlus } from "react-icons/ai";
export default function DestinationForm() {
  return (
    <form action="">
      <div className="input-fields-container">
        <input
          type="text"
          name="destination"
          className="input-field"
          placeholder="City, State"
        />
        <input
          type="date"
          name="destination"
          className="input-field"
          placeholder="Pick a Date"
        />
        <input
          type="time"
          name="destination"
          className="input-field"
          placeholder="Time you start your journey"
        />
      </div>
      <button className="add-btn" type="submit">
        Add <AiOutlinePlus />
      </button>
    </form>
  );
}

DestinationForm.jsx

Integrate it inside the <MapsBoard/>

import DestinationForm from "./DestinationForm";
import Logo from "./logo";
import svgs from "../assets";

const MapsBoard = () => {
  return (
    <div className="maps-board">
      <Logo />
      <h1>Pick and add your destinations</h1>
      <DestinationForm/>
      <img src={svgs.destination} alt="picking up from map" className="map-img" />
    </div>
  );
};
export default MapsBoard;

MapsBoard.jsx

This should be easy to understand as we’ve done it before and besides, it’s just picking and arranging the pieces together.

Let’s add the CSS real quick so that we can move on to the actual work,

/*-------------------MapsBoard-----------------------*/

/*---For DestinationForm-------------*/

form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
  align-items: center;
}

.input-fields-container {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.input-field {
  width: 100%;
  font-size: 1.3rem;
  border-radius: 0.7rem;
  padding: 0.5rem 0.8rem;
  outline: var(--logo-blue) solid 1px;
  border: var(--night-black) solid 1px;
}
.input-field:focus {
  outline: var(--logo-blue) solid 2px;
}

.add-btn {
  background-color: var(--primary-blue);
  border: solid 1.5px var(--primary-blue);
  padding: 0.5rem 0.8rem;
}
.add-btn:hover {
  background-color: var(--hover-blue);
  border: none;
}
.add-btn:active {
  background-color: var(--primary-blue);
}

/*For responsiveness*/
@media screen and (max-width: 600px) {
  .planning-container {
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100vh;
  }
  .planning-board {
    order: 2;
    border-radius: 3rem 3rem 0rem 0rem;
    width: 96%;
  }
  .dest-card {
    flex-direction: column;
    height: max-content;
    gap: 1rem;
    padding: 1rem 2rem;
  }
}

/*--------------maps-board------------*/
.maps-board {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  align-items: center;
  gap: 2rem;
  width: 35%;
  height: 100%;
  padding: 2rem;
}

/*For responsiveness*/
@media screen and (max-width: 600px) {
  .maps-board {
    gap: 1rem;
    width: 100%;
    height: auto;
    padding: 2rem 1rem;
  }
}

Planning.css

The last touch to styling would be for the top-level container of the Planning page, i.e “planning-container”. We need to arrange the planning-board and <TripsBoard/> side by side, we’ll do that by making planning-container a flexbox and keeping the default row direction.

/*--------------Planning---------------*/

/*To arrange both of the main components in a row using flexbox*/
.planning-container {
  display: flex;
  align-items: center; /*aligning on center in verticle direction*/
  width: 100%;
  height: max-content;
}

👆 Final Planning.jsx after adding styling