From 203b3bb340c2e7eb21dcbb16ba4660953e0b48ef Mon Sep 17 00:00:00 2001
From: Derek Chen <derex1987@gmail.com>
Date: Mon, 5 Feb 2024 21:38:34 -0600
Subject: [PATCH] chore: center div using display flex

---
 .../CalendarGrid/CalendarGrid.module.scss     |  9 ++++++++
 .../common/CalendarGrid/CalendarGrid.tsx      | 23 ++++++++-----------
 2 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/src/views/components/common/CalendarGrid/CalendarGrid.module.scss b/src/views/components/common/CalendarGrid/CalendarGrid.module.scss
index dd5e0a6d..675fd198 100644
--- a/src/views/components/common/CalendarGrid/CalendarGrid.module.scss
+++ b/src/views/components/common/CalendarGrid/CalendarGrid.module.scss
@@ -13,6 +13,15 @@
     flex: 1 0 0;
 }
 
+.calendarGrid {
+    display: flex;
+    flex-direction: column;
+}
+
+.calendarRow {
+    display: flex;
+}
+
 .calendar {
     display: grid;
     grid-template-columns: auto repeat(5, 1fr);
diff --git a/src/views/components/common/CalendarGrid/CalendarGrid.tsx b/src/views/components/common/CalendarGrid/CalendarGrid.tsx
index 95ff558f..9682521b 100644
--- a/src/views/components/common/CalendarGrid/CalendarGrid.tsx
+++ b/src/views/components/common/CalendarGrid/CalendarGrid.tsx
@@ -30,22 +30,17 @@ const Calendar: React.FC = (props) => {
       </div>
 
       {/* Displaying the rest of the calendar */}
-      {hoursOfDay.map((hour) => (
-        <div key={hour} className={styles.row}>
-          {/* Hour column */}
-          <div className={styles.timeLabelContainer}>
-            <span>{hour}:00</span>
+      <div className={styles.calendarGrid}>
+        {hoursOfDay.map(hour => (
+          <div key={hour} className={styles.calendarRow}>
+            {daysOfWeek.map(day => (
+              <CalendarCell key={`${day}-${hour}`} />
+            ))}
           </div>
-          {/* Calendar cells for each day */}
-          {daysOfWeek.map((day, dayIndex) => (
-            <div key={`${day}-${hour}`} className={styles.timeBlock}>
-              <CalendarCell />
-            </div>
-          ))}
-        </div>
-      ))}
+        ))}
+      </div>
     </div>
-  );
+  )
 };
 
 export default Calendar;