Implemented pin/save schedule feature

app/src/components/ScheduleDisplay.tsx

@@ -1,4 +1,4 @@
-import React, { Component } from "react";
+import React, { Component, useState, useEffect } from "react";
 import classNames from "classnames";
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
@@ -25,6 +25,52 @@ type MeetTimeInfo = {
     sectionIsOnline: boolean;
 };
 
+// Pin/Save Feature (new)
+const PinScheduleFeature = ({ schedule }) => {
+    const [pinnedSchedules, setPinnedSchedules] = useState([]);
+
+    // Load pinned schedules from localStorage when component mounts
+    useEffect(() => {
+        const savedSchedules = JSON.parse(localStorage.getItem('pinnedSchedules'));
+        if (savedSchedules) {
+            setPinnedSchedules(savedSchedules);
+        }
+    }, []);
+
+    const pinSchedule = (schedule) => {
+        const updatedPinned = [...pinnedSchedules, schedule];
+        setPinnedSchedules(updatedPinned);
+        localStorage.setItem('pinnedSchedules', JSON.stringify(updatedPinned));
+    };
+
+    const removePinnedSchedule = (index) => {
+        const updatedPinned = pinnedSchedules.filter((_, i) => i !== index);
+        setPinnedSchedules(updatedPinned);
+        localStorage.setItem('pinnedSchedules', JSON.stringify(updatedPinned));
+    };
+
+    return (
+        <div>
+            <button onClick={() => pinSchedule(schedule)}>📌 Pin</button>
+
+            {/* Display pinned schedules */}
+            <div className="pinned-schedules">
+                <h2>Pinned Schedules</h2>
+                {pinnedSchedules.length === 0 ? (
+                    <p>No pinned schedules yet.</p>
+                ) : (
+                    pinnedSchedules.map((schedule, index) => (
+                        <div key={index} className="pinned-schedule">
+                            <h3>Pinned Schedule {index + 1}</h3>
+                            <button onClick={() => removePinnedSchedule(index)}>Unpin</button>
+                        </div>
+                    ))
+                )}
+            </div>
+        </div>
+    );
+};
+
 export default class ScheduleDisplay extends Component<Props, States> {
     // TODO: redo this (it is *disgusting*); maybe there is a library that does the work
 
@@ -193,6 +239,9 @@ export default class ScheduleDisplay extends Component<Props, States> {
                 >
                     Export Schedule
                 </button>
+                {/* Added pin/save feature below */}
+                <PinScheduleFeature schedule={this.props.schedule} />
+
                 <div className={"min-w-full w-5/12 my-1"}>
                     <div className={"flex gap-1"}>
                         {schedule.map((sec: Section, s: number) => (