add legend component (#27)

* add legend component

* add lucide-react and prettier ignore pnpm-lock

* extract year colour code to file

* implement requested changes for ExplorerLegend

* minor syntax fixes

---------

Author: norioriroiron

src/components/CourseNode.tsx

@@ -1,25 +1,14 @@
 import { Handle, Position, type Node, type NodeProps } from '@xyflow/react';
 import { useExplorerStore } from '@/store/explorerStore';
+import { yearColour } from '@/lib/yearColour';
 
 export type CourseNodeData = { code: string; title: string };
 export type CourseNodeType = Node<CourseNodeData>;
 
 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 borderColour = yearColour(data.code);
 
   return (
     <div

src/components/ExplorerLegend.tsx

@@ -0,0 +1,40 @@
+import { useState } from 'react';
+
+import { YEAR_COLOUR, YEAR_COLOUR_DEFAULT } from '@/lib/yearColour';
+import { ChevronUp, ChevronDown } from 'lucide-react';
+
+export default function ExplorerLegend() {
+  const [open, setOpen] = useState(true);
+  const rowClass = 'flex flex-row gap-2';
+  const boxClass = '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">
+      <button
+        type="button"
+        onClick={() => setOpen(!open)}
+        aria-expanded={open}
+        className="flex w-full items-center gap-2"
+      >
+        {open ? <ChevronUp size={16} /> : <ChevronDown size={16} />}
+        <span className="flex-1 text-left font-semibold">Legend</span>
+      </button>
+
+      {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={rowClass} key={key}>
+              <div className={`${boxClass} ${colour}`}></div>
+              <p>{`Year ${key} (${key}000-level)`}</p>
+            </div>
+          ))}
+
+          <div className={rowClass}>
+            <div className={`${boxClass} ${YEAR_COLOUR_DEFAULT}`}></div>
+            <p>Other</p>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

src/lib/yearColour.ts

@@ -0,0 +1,13 @@
+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 function yearColour(code: string): string {
+  const digit = code.match(/\d/)?.[0];
+  return (digit && YEAR_COLOUR[digit]) ?? YEAR_COLOUR_DEFAULT;
+}

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}