Update

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

@@ -2,6 +2,7 @@ import React from 'react';
 import { DAY_MAP } from 'src/shared/types/CourseMeeting';
 import styles from './CalendarGrid.module.scss';
 import CalendarCell from '../CalendarGridCell/CalendarGridCell';
+import { CourseMeeting } from 'src/shared/types/CourseMeeting';
 
 const daysOfWeek = Object.keys(DAY_MAP).filter(key => !['S', 'SU'].includes(key));
 const hoursOfDay = Array.from({ length: 14 }, (_, index) => index + 8);
@@ -20,37 +21,44 @@ for (let i = 0; i < 13; i++) {
     grid.push(row);
 }
 
+interface Props {
+    CourseMeetingBlocks: CourseMeeting[];
+}
+
 /**
  * Grid of CalendarGridCell components forming the user's course schedule calendar view
  * @param props
  */
-const Calendar: React.FC = props => (
+export function Calendar({ CourseMeetingBlocks }: React.PropsWithChildren<Props>): JSX.Element {
-    <div className={styles.calendar}>
+
-        <div className={styles.dayLabelContainer} />
+    return (
-        {/* Displaying the rest of the calendar */}
+        <div className={styles.calendar}>
-        <div className={styles.timeAndGrid}>
+            <div className={styles.dayLabelContainer} />
-            {/* <div className={styles.timeColumn}>
+            {/* Displaying the rest of the calendar */}
-          <div className={styles.timeBlock}></div>
+            <div className={styles.timeAndGrid}>
-          {hoursOfDay.map((hour) => (
+                {/* <div className={styles.timeColumn}>
-            <div key={hour} className={styles.timeBlock}>
+            <div className={styles.timeBlock}></div>
-              <div className={styles.timeLabelContainer}>
+            {hoursOfDay.map((hour) => (
-                <p>{hour % 12 === 0 ? 12 : hour % 12} {hour < 12 ? 'AM' : 'PM'}</p>
+                <div key={hour} className={styles.timeBlock}>
-              </div>
+                <div className={styles.timeLabelContainer}>
-            </div>
+                    <p>{hour % 12 === 0 ? 12 : hour % 12} {hour < 12 ? 'AM' : 'PM'}</p>
-          ))}
+                </div>
-        </div> */}
+                </div>
-            <div className={styles.calendarGrid}>
+            ))}
-                {/* Displaying day labels */}
+            </div> */}
-                <div className={styles.timeBlock} />
+                <div className={styles.calendarGrid}>
-                {daysOfWeek.map(day => (
+                    {/* Displaying day labels */}
-                    <div key={day} className={styles.day}>
+                    <div className={styles.timeBlock} />
-                        {day}
+                    {daysOfWeek.map(day => (
-                    </div>
+                        <div key={day} className={styles.day}>
-                ))}
+                            {day}
-                {grid.map((row, rowIndex) => row)}
+                        </div>
+                    ))}
+                    {grid.map((row, rowIndex) => row)}
+                </div>
             </div>
         </div>
-    </div>
+    );
 );
 
 export default Calendar;

src/views/components/common/Chip/Chip.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
 import Text from '../Text/Text';
 
-
+export const flags = ['WR', 'QR', 'GC', 'CD', 'E', 'II'];
-export const flags = ["WR", "QR", "GC", "CD", "E", "II"]
 
 interface Props {
     label: string;
@@ -12,15 +11,16 @@ interface Props {
  * A reusable chip component that follows the design system of the extension.
  * @returns
  */
-export function Chip({
+export function Chip({ label }: React.PropsWithChildren<Props>): JSX.Element {
-    label
-}: React.PropsWithChildren<Props>): JSX.Element {
     return (
-        <Text as = 'div' variant = 'h4'
+        <Text
-        className="min-w-5 inline-flex items-center justify-center gap-2.5 rounded-lg px-1 py-0.5" 
+            as='div'
-        style={{
+            variant='h4'
-            backgroundColor: "#FFD600"
+            className='min-w-5 inline-flex items-center justify-center gap-2.5 rounded-lg px-1 py-0.5'
-        }}>
+            style={{
+                backgroundColor: '#FFD600',
+            }}
+        >
             {label}
         </Text>
     );