# カレンダーのナビゲーションメニューを作成1 次に、先月と次月のカレンダーを表示するようにしましょう。 `feature/prev-and-next-month-calendar`にて作業します。 ```bash git switch -c feature/prev-and-next-month-calendar ``` まず`CalendarPage.tsx`の方で`today`という定数を定義していましたが、こちらを`currentDate`というstateとして管理できるようにします。

import { getMonth} from "date-fns";
import { useState } from "react";
import { CalendarHeader } from "../organisms/CalendarHeader";
import { CalendarBody } from "../organisms/CalendarBody";
import { useCalendar } from "../../hooks/useCalendar";

export const CalendarPage = () => {
  const [currentDate, setCurrentDate] = useState(new Date())
  const { dateList } = useCalendar({ currentDate: currentDate });

  return (
    <>
      <h1 className=" font-bold text-3xl mb-5">{`${
        getMonth(currentDate) + 1
      }月`}</h1>
      <table className="w-[80%] border-collapse border-2 border-solid border-lime-800 table-fixed">
        <CalendarHeader />
        <CalendarBody currentDate={currentDate} dateList={dateList} />
      </table>
    </>
  );
}

次に`organisms`配下に`CalendarNav.tsx`を作成しましょう。先月、次月のカレンダーに移動できるように、左右の矢印のアイコンを使用します。`react-icons`の`FaArrowAltCircleLeft`と`FaArrowAltCircleRight`を使用しましょう。そして、そのアイコンの間に`今日`というボタンを配置し、今月のカレンダーに移動できるようにします。

import { FaArrowAltCircleLeft, FaArrowAltCircleRight } from "react-icons/fa"

export const CalendarNav = () => {
  return (
    <div className="w-[80%] flex justify-between mb-2">
      <div className="flex items-center text-white gap-4">
        <FaArrowAltCircleLeft className="text-lime-800 text-2xl" />
        <button className="bg-lime-800 text-white p-2 text-sm rounded-lg">
          今日
        </button>
        <FaArrowAltCircleRight className="text-lime-800 text-2xl" />
      </div>
    </div>
  )
}

ここで、`今日`というボタンに関してですが、レイアウトが`PrimaryBtn`コンポーネントと、`p-2 text-sm`のみ異なるので、`PrimaryBtn`にて`size`というpropsを受け取れるようにして、`p-2 text-sm`を変更できるようにしましょう。`PrimaryBtn`にて`SIZE_MAPPING`というオブジェクトの定数を定義して、受け取った`size`というpropsで`SIZE_MAPPING[size]`とすることで、その値を取得し、`className`に埋め込むことで、`size`によって`className`を変更することができます。

import { ReactNode } from "react";

type PropsType = {
  size: "sm" | "lg"
  onClick: () => void
  children: ReactNode
}

const SIZE_MAPPING = {
  sm: "p-2 text-sm",
  lg: "p-4 text-lg",
};

export const PrimaryBtn = ({ size, onClick, children }: PropsType) => {
  return (
    <button
      className={`bg-lime-800 text-white ${SIZE_MAPPING[size]} rounded-lg`}
      onClick={onClick}
    >
      {children}
    </button>
  );
};

`PrimaryBtn`を呼び出しているところを修正しましょう。TopPage.tsxとLoginPage.tsxを修正しましょう。

...
        <PrimaryBtn size="lg" onClick={() => navigate("/login")}>ログイン</PrimaryBtn>
...

...
        <PrimaryBtn size="lg" onClick={() => null}>ログイン</PrimaryBtn>
...

そして、`CalendarNav`の`今日`のボタンに`PrimaryBtn`を使用するようにしましょう。

import { FaArrowAltCircleLeft, FaArrowAltCircleRight } from "react-icons/fa";
import { PrimaryBtn } from "../atoms/PrimaryBtn";


export const CalendarNav = () => {
  return (
    <div className="w-[80%] flex justify-between mb-2">
      <div className="flex items-center text-white gap-4">
        <FaArrowAltCircleLeft className="text-lime-800 text-2xl" />
        <PrimaryBtn size="sm" onClick={() => null}>
          今日
        </PrimaryBtn>
        <FaArrowAltCircleRight className="text-lime-800 text-2xl" />
      </div>
    </div>
  );
};

こちらをCalendarPage.tsxにて呼び出しましょう。

import { getMonth} from "date-fns";
import { CalendarHeader } from "../organisms/CalendarHeader";
import { CalendarBody } from "../organisms/CalendarBody";
import { useCalendar } from "../../hooks/useCalendar";
import { useState } from "react";
import { CalendarNav } from "../organisms/CalendarNav";

export const CalendarPage = () => {
  const [currentDate, setCurrentDate] = useState(new Date())
  const { dateList } = useCalendar({ currentDate: currentDate });

  return (
    <>
      <h1 className=" font-bold text-3xl mb-5">{`${
        getMonth(currentDate) + 1
      }月`}</h1>
      <CalendarNav />
      <table className="w-[80%] border-collapse border-2 border-solid border-lime-800 table-fixed">
        <CalendarHeader />
        <CalendarBody currentDate={currentDate} dateList={dateList} />
      </table>
    </>
  );
}

以下のように表示されるかと思います。

ここまでの作業をcommitしましょう。 ```bash git add . ``` ```bash git commit ``` commitメッセージは ``` feat: カレンダーのナビゲーションメニューのレイアウトを作成 ``` としましょう。