feat: add cal save buttons (no functionality)

src/views/components/common/CalendarGrid/CalendarGrid.module.scss

@@ -22,9 +22,10 @@
 }
 
 .calendar {
-    // display: grid;
-    // grid-template-columns: auto repeat(5, 1fr);
+    display: flex;
+    flex-direction: column;
     gap: 10px;
+    position: relative; // Ensuring that child elements can be positioned in relation to this.
 }
 
 .day {
@@ -89,3 +90,38 @@
         line-height: normal;
     }
 }
+
+.buttonContainer {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 10px; // Adjust the gap as needed
+    padding: 10px;
+    margin-top: auto;
+}
+
+.calendarButton {
+    display: flex;
+    align-items: center;
+    gap: 5px; // Space between icon and text
+    padding: 6px 6px;
+    border: none;
+    background-color: transparent;
+    color: #333; // Adjust based on your design
+    cursor: pointer;
+
+    &:hover {
+        background-color: rgba(0, 0, 0, 0.1); // Adjust hover effect as desired
+    }
+}
+
+.buttonIcon {
+    height: 24px; // Adjust size as needed
+    fill: currentColor;
+}
+
+.divider {
+    height: 30px; // Adjust height as needed
+    width: 1px;
+    background-color: grey; // Adjust color as needed
+}

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

@@ -5,6 +5,8 @@ import { CalendarGridCourse } from 'src/views/hooks/useFlattenedCourseSchedule';
 import CalendarCourseCell from '../CalendarCourseCell/CalendarCourseCell';
 import { Chip } from '../Chip/Chip';
 import styles from './CalendarGrid.module.scss';
+import calIcon from './cal.svg';
+import pngIcon from './png.svg';
 
 const daysOfWeek = Object.keys(DAY_MAP).filter(key => !['S', 'SU'].includes(key));
 const hoursOfDay = Array.from({ length: 14 }, (_, index) => index + 8);
@@ -59,7 +61,7 @@ function CalendarGrid({ courseCells, saturdayClass }: React.PropsWithChildren<Pr
                     {grid.map(row => row)}
                 </div>
             </div>
-            {courseCells.map((Block: typeof CalendarCourseCell) => (
+            {/* {courseCells.map((Block: typeof CalendarCourseCell) => (
                 <div
                     key={`${Block}`}
                     style={{
@@ -69,7 +71,19 @@ function CalendarGrid({ courseCells, saturdayClass }: React.PropsWithChildren<Pr
                 >
                     <CalendarCourseCell courseDeptAndInstr={} />
                 </div>
-                ))}
+                ))} */}
+            <div className={styles.buttonContainer}>
+                <div className={styles.divider}></div> {/* First divider */}
+                <button className={styles.calendarButton}>
+                    <img src={calIcon} className={styles.buttonIcon} alt="CAL" />
+                    Save as .CAL
+                </button>
+                <div className={styles.divider}></div> {/* Second divider */}
+                <button className={styles.calendarButton}>
+                    <img src={pngIcon} className={styles.buttonIcon} alt="PNG" />
+                    Save as .PNG
+                </button>
+            </div>
         </div>
     );
 }