From c44fd014e9ad0b2307dfa39cb036c365788adb92 Mon Sep 17 00:00:00 2001
From: Derek Chen <derex1987@gmail.com>
Date: Fri, 9 Feb 2024 17:07:21 -0600
Subject: [PATCH] ARRAY.FROM PAIN

---
 .../common/CalendarGrid/CalendarGrid.tsx      | 22 ++++++++++++++-----
 1 file changed, 17 insertions(+), 5 deletions(-)

diff --git a/src/views/components/common/CalendarGrid/CalendarGrid.tsx b/src/views/components/common/CalendarGrid/CalendarGrid.tsx
index 7fb30e19..4145b6a5 100644
--- a/src/views/components/common/CalendarGrid/CalendarGrid.tsx
+++ b/src/views/components/common/CalendarGrid/CalendarGrid.tsx
@@ -5,11 +5,23 @@ import { DAY_MAP } from 'src/shared/types/CourseMeeting';
 
 const daysOfWeek = Object.keys(DAY_MAP).filter(key => !['SAT', 'SUN'].includes(key));
 const hoursOfDay = Array.from({ length: 14 }, (_, index) => index + 8);
-const grid = Array.from({ length: 5 }, () =>
-  Array.from({ length: 13 }, (_, columnIndex) => (
-    <CalendarCell key={columnIndex} />
-  ))
-);
+const grid = Array.from({ length: 6 }, (_, rowIndex) => {
+  let index = 0;
+  return Array.from({ length: 13 }, (_, columnIndex) => {
+    if (columnIndex == 0) {
+      index += 1;
+      return (
+        <div key={columnIndex} className={styles.timeBlock}>
+          <div className={styles.timeLabelContainer}>
+            <p>{hoursOfDay[index - 1]}</p>
+          </div>
+        </div>
+      );
+    } else {
+      return <CalendarCell key={columnIndex} />;
+    }
+  })
+});
 
 /**
  * Grid of CalendarGridCell components forming the user's course schedule calendar view