feat: calendar components 3rd attempt at merging (#60)

src/views/components/common/CalendarGrid/CalendarGrid.tsx

@@ -1,31 +1,36 @@
 import React from 'react';
 import styles from './CalendarGrid.module.scss';
 import CalendarCell from '../CalendarGridCell/CalendarGridCell';
+import { DAY_MAP } from 'src/shared/types/CourseMeeting';
 
-const Calendar: React.FC = () => {
-    const daysOfWeek = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'];
-    const hoursOfDay = Array.from({ length: 14 }, (_, index) => index + 8);
-  
+const daysOfWeek = Object.values(DAY_MAP);
+const hoursOfDay = Array.from({ length: 14 }, (_, index) => index + 8);
+
+/**
+ * Grid of CalendarGridCell components forming the user's course schedule calendar view
+ * @param props
+ */
+const Calendar: React.FC = props => {
     return (
-      <div className="calendar">
-        <div className="day-label-container"></div>
-        {daysOfWeek.map((day, dayIndex) => (
-          <div key={dayIndex} className="day">
-            <div className="day-label-container">
-              <div className="day-label">{day}</div>
-            </div>
-            {hoursOfDay.map((hour) => (
-              <div key={`${day}-${hour}`} className="time-block">
-                <div className="time-label-container">
-                  <span>{hour}:00</span>
+        <div className={styles.calendar}>
+            <div className={styles.dayLabelContainer}></div>
+            {daysOfWeek.map((day, dayIndex) => (
+                <div key={dayIndex} className={styles.day}>
+                    <div className={styles.dayLabelContainer}>
+                        <div className={styles.dayLabel}>{day}</div>
+                    </div>
+                    {hoursOfDay.map(hour => (
+                        <div key={`${day}-${hour}`} className={styles.timeBlock}>
+                            <div className={styles.timeLabelContainer}>
+                                <span>{hour}:00</span>
+                            </div>
+                            <CalendarCell />
+                        </div>
+                    ))}
                 </div>
-                <CalendarCell />
-              </div>
             ))}
-          </div>
-        ))}
-      </div>
+        </div>
     );
-  };
-  
-  export default Calendar;
+};
+
+export default Calendar;