Reactでカレンダーコンポーネントを作るぞ！

import React, { useState } from 'react'

export const Calendar = () => {
  const [date, setDate] = useState(new Date())

  const daysOfWeek = ['日', '月', '火', '水', '木', '金', '土']
  const monthsOfYear = [
    '1月',
    '2月',
    '3月',
    '4月',
    '5月',
    '6月',
    '7月',
    '8月',
    '9月',
    '10月',
    '11月',
    '12月',
  ]

  const prevMonth = () => {
    setDate(new Date(date.getFullYear(), date.getMonth() - 1, 1))
  }
  const nextMonth = () => {
    setDate(new Date(date.getFullYear(), date.getMonth() + 1, 1))
  }

  const renderDaysOfWeek = () => {
    return daysOfWeek.map((day) => (
      <div className="w-6" key={day}>
        {day}
      </div>
    ))
  }

  const renderCalendarDays = () => {
    const firstDayOfMonth = new Date(date.getFullYear(), date.getMonth(), 1)
    const lastDayOfMonth = new Date(date.getFullYear(), date.getMonth() + 1, 0)
    const numDaysInMonth = lastDayOfMonth.getDate()

    const daysOfWeek = []
    const days = []

    for (let i = 1; i <= firstDayOfMonth.getDay(); i++) {
      daysOfWeek.push(<div className="w-6" key={`empty-${i}`}></div>)
    }

    for (let i = 1; i <= numDaysInMonth; i++) {
      const currentDate = new Date(date.getFullYear(), date.getMonth(), i)
      daysOfWeek.push(
        <div
          className="w-6 h-6 cursor-pointer hover:bg-gray-300 hover:rounded-[50%] text-center"
          onClick={() => console.log(currentDate)}
          key={currentDate.toString()}
        >
          {i}
        </div>
      )
      if (daysOfWeek.length === 7 || i === numDaysInMonth) {
        days.push(
          <div key={`week-${i}`} className="flex">
            {daysOfWeek.map((day) => day)}
          </div>
        )
        daysOfWeek.splice(0)
      }
    }

    return days
  }

  return (
    <div className="">
      <div className="flex space-x-2">
        <button onClick={prevMonth}>Prev</button>
        <h2>
          {monthsOfYear[date.getMonth()]} {date.getFullYear()}
        </h2>
        <button onClick={nextMonth}>Next</button>
      </div>
      <div className="flex-row">
        <div className="flex">{renderDaysOfWeek()}</div>
        <div className="flex-row flex-wrap">{renderCalendarDays()}</div>
      </div>
    </div>
  )
}

const lastDayOfMonth = new Date(date.getFullYear(), date.getMonth() + 1, 0)