Xiaohan-Tian
44 lines
1.3 KiB
TypeScript
44 lines
1.3 KiB
TypeScript
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;
|