add legend component

src/components/CourseNode.tsx

@@ -4,22 +4,20 @@
 export type CourseNodeData = { code: string; title: string };
 export type CourseNodeType = Node<CourseNodeData>;
 
+export const YEAR_COLOUR_DEFAULT = 'border-gray-300';
+
+export const YEAR_COLOUR: Record<string, string> = {
+  '1': 'border-green-500',
+  '2': 'border-blue-500',
+  '3': 'border-yellow-500',
+  '4': 'border-red-500',
+};
+
 export default function CourseNode({ data }: NodeProps<CourseNodeType>) {
   const { selectedCourse, highlightedSet } = useExplorerStore();
   const dimmed = selectedCourse !== null && !highlightedSet.has(data.code);
-
-  const year = data.code.match(/\d/)?.[0];
-
-  const borderColour =
-    year === '1'
-      ? 'border-green-500'
-      : year === '2'
-        ? 'border-blue-500'
-        : year === '3'
-          ? 'border-yellow-500'
-          : year === '4'
-            ? 'border-red-500'
-            : 'border-gray-300';
+  const match = data.code.match(/\d/);
+  const borderColour = match ? YEAR_COLOUR[match[0]] : YEAR_COLOUR_DEFAULT;
 
   return (
     <div

src/components/ExplorerLegend.tsx

@@ -0,0 +1,36 @@
+import { useState } from 'react';
+
+import { YEAR_COLOUR, YEAR_COLOUR_DEFAULT } from '@/components/CourseNode';
+
+export default function ExplorerLegend() {
+  const [open, setOpen] = useState(true);
+  const div = 'flex flex-row gap-2';
+  const colouredDiv = 'w-9 h-4 border-2 self-center rounded';
+
+  return (
+    <div className="text-sm absolute left-4 top-16 w-72 bg-white border border-gray-300 px-3 py-2 rounded-lg shadow-md z-1">
+      <div className="flex gap-2">
+        <button className="hover:text-red-600" onClick={() => setOpen(!open)}>
+          {open ? '▲' : '▼'}
+        </button>
+        <p className="flex-1 font-semibold">Legend</p>
+      </div>
+
+      {open && (
+        <div className="flex flex-col gap-1 border-t border-gray-300 pt-1 mt-2">
+          {Object.entries(YEAR_COLOUR).map(([key, colour]) => (
+            <div className={`${div}`}>
+              <div className={`${colouredDiv} ${colour}`}></div>
+              <p>{`Year ${key} (${key}000-level)`}</p>
+            </div>
+          ))}
+
+          <div className={`${div}`}>
+            <div className={`${colouredDiv} ${YEAR_COLOUR_DEFAULT}`}></div>
+            <p>Other</p>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

src/pages/Explorer.tsx

@@ -25,6 +25,7 @@ import CourseNode from '@/components/CourseNode';
 import type { CourseNodeData } from '@/components/CourseNode';
 import CourseDetailPanel from '@/components/CourseDetailPanel';
 import ExplorerSearch from '@/components/ExplorerSearch';
+import ExplorerLegend from '@/components/ExplorerLegend';
 
 const NODE_W = 180;
 const NODE_H = 60;
@@ -108,6 +109,7 @@ export default function Explorer() {
   return (
     <div className="relative h-full w-full">
       <ExplorerSearch />
+      <ExplorerLegend />
       <ReactFlow
         nodes={nodes}
         edges={edges}