feat: added region color customization feature

2026-07-01 22:31:35 -07:00
parent e626e1fc76
commit 4f11fe8e25
31 changed files with 700 additions and 31 deletions
@@ -0,0 +1,43 @@
+import React from 'react';
+import { FaUndoAlt } from 'react-icons/fa';
+import { LOGIC_REGION_COLOR_SWATCHES } from '../../constants/regionColorPalette';
+import './ColorPalettePopup.css';
+
+interface ColorPalettePopupProps {
+  selectedColor?: string;
+  onSelect: (color: string | null) => void;
+  className?: string;
+}
+
+const ColorPalettePopup: React.FC<ColorPalettePopupProps> = ({
+  selectedColor,
+  onSelect,
+  className = '',
+}) => (
+  <div className={`color-palette-popup ${className}`.trim()} role="menu" aria-label="Color palette">
+    <button
+      type="button"
+      className={`color-palette-none${selectedColor === undefined ? ' active' : ''}`}
+      onClick={() => onSelect(null)}
+      aria-label="Reset color"
+      title="Reset color"
+    >
+      <FaUndoAlt aria-hidden="true" />
+    </button>
+    <div className="color-palette-grid">
+      {LOGIC_REGION_COLOR_SWATCHES.flat().map((color) => (
+        <button
+          key={color}
+          type="button"
+          className={`color-palette-swatch${selectedColor === color ? ' active' : ''}`}
+          style={{ backgroundColor: color }}
+          onClick={() => onSelect(color)}
+          title={color}
+          aria-label={`Select color ${color}`}
+        />
+      ))}
+    </div>
+  </div>
+);
+
+export default ColorPalettePopup;