From b535a6eb32ac1091c8b5309ca3cfb6bab0b62526 Mon Sep 17 00:00:00 2001
From: Derek Chen <derex1987@gmail.com>
Date: Mon, 5 Feb 2024 22:02:29 -0600
Subject: [PATCH] feat: use display: grid for calendarGrid

---
 .../CalendarGrid/CalendarGrid.module.scss     |  6 ++++--
 .../common/CalendarGrid/CalendarGrid.tsx      | 21 +++++++------------
 2 files changed, 11 insertions(+), 16 deletions(-)

diff --git a/src/views/components/common/CalendarGrid/CalendarGrid.module.scss b/src/views/components/common/CalendarGrid/CalendarGrid.module.scss
index d2e180b2..41909207 100644
--- a/src/views/components/common/CalendarGrid/CalendarGrid.module.scss
+++ b/src/views/components/common/CalendarGrid/CalendarGrid.module.scss
@@ -15,8 +15,10 @@
 }
 
 .calendarGrid {
-    display: flex;
-    flex-direction: column;
+    display: grid;
+    grid-template-columns: repeat(5, 1fr);
+    grid-template-rows: repeat(13, 1fr);
+    grid-gap: 8px;
 }
 
 .calendarRow {
diff --git a/src/views/components/common/CalendarGrid/CalendarGrid.tsx b/src/views/components/common/CalendarGrid/CalendarGrid.tsx
index 95226ce1..df959462 100644
--- a/src/views/components/common/CalendarGrid/CalendarGrid.tsx
+++ b/src/views/components/common/CalendarGrid/CalendarGrid.tsx
@@ -7,8 +7,8 @@ const daysOfWeek = Object.values(DAY_MAP);
 daysOfWeek.pop();
 daysOfWeek.pop();
 const hoursOfDay = Array.from({ length: 14 }, (_, index) => index + 8);
-const grid = Array.from({ length: 13 }, () =>
-  Array.from({ length: 5 }, (_, columnIndex) => (
+const grid = Array.from({ length: 5 }, () =>
+  Array.from({ length: 13 }, (_, columnIndex) => (
     <CalendarCell key={columnIndex} />
   ))
 );
@@ -31,21 +31,14 @@ const Calendar: React.FC = (props) => {
         ))}
       </div>
       {/* Displaying the rest of the calendar */}
-      {/* <div className={styles.calendarGrid}>
-        {hoursOfDay.map(hour => (
-          <div key={hour} className={styles.calendarRow}>
-            {daysOfWeek.map(day => (
-              <CalendarCell key={`${day}-${hour}`} />
-            ))}
+      <div className={styles.calendarGrid}>
+        {grid.map((row, rowIndex) => (
+          <div className={styles.row} key={rowIndex}>
+            {row}
           </div>
         ))}
-      </div> */}
+      </div>
 
-      {grid.map((row, rowIndex) => (
-        <div className={styles.row} key={rowIndex}>
-          {row}
-        </div>
-      ))}
     </div>
   )
 };