React Router > Mission Page: Action Row Buttons

Mission Page: Action Row Buttons

Here we've added some action buttons next to the title.

We're using two grids here. The MissionTitleRow is a grid that allows the title to take up available space with 1fr, and the action buttons will take up 200px.

MissionActions is rendered in the second child slot, where this is also a grid. We've set display: grid on this component, and set grid-auto-flow: column instead of grid-template-columns to allow the columns to automatically flow without fixed width. We set justify-self: right to have this whole grid (the action buttons) align to the right parent grid, and lastly, a gap: 4px adds spacing between the buttons.

Lesson 22/26

import { useMemo } from "react";
import styled from "styled-components";
import { useParams } from "react-router-dom";
import { missions } from "./Missions";
import Button from "../Components/Button";

const MissionTitleRow = styled.div`
  display: grid;
  grid-template-columns: 1fr 200px;
`;

const MissionTitle = styled.h2`
  font-size: 22px; 
`;

const DescriptionContainer = styled.div``;

const DescriptionParagraph = styled.p`
  font-size: 16px;
  font-weight: normal;
  line-height: 21px;
`;

const MissionActions = styled.div`
  display: grid;
  grid-auto-flow: column;
  justify-self: right;
  gap: 4px;
`;

function findMissionById(id) {
  return () => missions.find((mission) => mission.id == id);
}

function Mission() {
  const { id } = useParams();
  const mission = useMemo(findMissionById(id), []);

  if (!mission) {
    return <div> No mission found </div>;
  }

  const { title, description } = mission;

  return (
    <div>
      <MissionTitleRow>
        <MissionTitle> {title} </MissionTitle>
        <MissionActions>
          <Button>Edit</Button>
          <Button>Delete</Button>
        </MissionActions>
      </MissionTitleRow>
      <DescriptionContainer>
        <DescriptionParagraph>{description}</DescriptionParagraph>
      </DescriptionContainer>
    </div>
  );
}

export default Mission;

Open Sandbox