Move into folders

frontend/src/components/map/MapLegend.tsx

@@ -0,0 +1,66 @@
+import { formatValue } from '../../lib/format';
+
+export default function MapLegend({
+  featureLabel,
+  range,
+  showCancel,
+  onCancel,
+  mode,
+  enumValues,
+}: {
+  featureLabel: string;
+  range: [number, number];
+  showCancel: boolean;
+  onCancel: () => void;
+  mode: 'feature' | 'density';
+  enumValues?: string[];
+}) {
+  const gradientStyle =
+    mode === 'density'
+      ? 'linear-gradient(to right, rgb(130, 234, 220), rgb(20, 140, 180), rgb(88, 28, 140))'
+      : 'linear-gradient(to right, rgb(46, 204, 113), rgb(241, 196, 15), rgb(231, 76, 60), rgb(142, 68, 173))';
+
+  return (
+    <div className="absolute top-3 right-3 z-10 bg-white dark:bg-navy-800 dark:text-warm-200 rounded shadow-lg p-3 text-xs min-w-[160px]">
+      <div className="flex items-center justify-between mb-2">
+        <span className="font-semibold text-sm">{featureLabel}</span>
+        {showCancel && (
+          <button
+            onClick={onCancel}
+            className="text-warm-400 hover:text-warm-700 dark:hover:text-warm-300 ml-2"
+            title="Clear color view"
+          >
+            <svg
+              className="w-4 h-4"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+              strokeWidth={2}
+            >
+              <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+        )}
+      </div>
+      <div className="h-3 rounded" style={{ background: gradientStyle }} />
+      <div className="flex justify-between mt-1 text-warm-600 dark:text-warm-400">
+        {mode === 'density' ? (
+          <>
+            <span>Few</span>
+            <span>Many</span>
+          </>
+        ) : enumValues && enumValues.length > 0 ? (
+          <>
+            <span>{enumValues[0]}</span>
+            <span>{enumValues[enumValues.length - 1]}</span>
+          </>
+        ) : (
+          <>
+            <span>{formatValue(range[0])}</span>
+            <span>{formatValue(range[1])}</span>
+          </>
+        )}
+      </div>
+    </div>
+  );
+}