refactor

kabinizer-front-end/src/pages/selectPeriods/Calendar/DrawPeriodsCalendar.tsx

@@ -4,10 +4,11 @@ import {
   DrawService,
 } from "../../../../api";
 import { CompareDates } from "@/utils";
-import DrawPeriodMonths from "./Months";
 import { useMutation, useQuery, useQueryClient } from "react-query";
 import useUser from "@/hooks/useUser.tsx";
 import { getMonthsMap, GetWeeklyPeriods } from "@/utils/calendar.ts";
+import Weeks from "@/pages/selectPeriods/Calendar/Weeks.tsx";
+import { MonthsContainer } from "@/pages/selectPeriods/Calendar/MonthsContainer.tsx";
 
 const DrawPeriodsCalendar = () => {
   const user = useUser();
@@ -55,11 +56,18 @@ const DrawPeriodsCalendar = () => {
   };
 
   return (
-    <DrawPeriodMonths
-      months={monthMap}
-      selected={bookingRequests || []}
-      onClick={toggleBooking}
-    />
+    <div className="flex flex-col gap-1">
+      {Object.entries(monthMap).map(([month, weeks]) => (
+        <MonthsContainer key={month} month={Number(month)}>
+          <Weeks
+            weeks={weeks}
+            selected={bookingRequests || []}
+            month={Number(month)}
+            onClick={toggleBooking}
+          />
+        </MonthsContainer>
+      ))}
+    </div>
   );
 };
 

kabinizer-front-end/src/pages/selectPeriods/Calendar/MonthsContainer.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import MonthColumn from "@/components/MonthVertical.tsx";
+import { COLORS, MONTHS } from "@/options";
+
+export const MonthsContainer = ({
+  children,
+  month,
+}: {
+  children: React.ReactNode;
+  month: number;
+}) => {
+  return (
+    <div key={month} className="flex items-center gap-x-4">
+      <MonthColumn
+        month={MONTHS[month]}
+        color={COLORS[month % COLORS.length].selected}
+      />
+      <div
+        className={`relative flex w-72 flex-col rounded-lg p-2 ${
+          month % 2
+            ? "bg-blue-200 dark:bg-blue-700"
+            : "bg-purple-200 dark:bg-purple-700"
+        }`}
+      >
+        {children}
+      </div>
+    </div>
+  );
+};