44 lines
1.0 KiB
TypeScript
44 lines
1.0 KiB
TypeScript
import React from "react";
|
|
import Palette, { palettes } from "./Palette";
|
|
|
|
interface PaletteSelectProps {
|
|
value: Palette;
|
|
onChange: (palette: Palette) => void;
|
|
}
|
|
|
|
function PaletteSelect({ value, onChange }: PaletteSelectProps) {
|
|
const handlePaletteChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
|
|
onChange(palettes[parseInt(event.target.value)]);
|
|
};
|
|
|
|
// Index of the palette in the palettes array, used as the value of the select
|
|
const valueIndex = palettes.findIndex((p) => p === value);
|
|
|
|
const paletteOptions = palettes.map((palette, index) => (
|
|
<option key={index} value={index}>
|
|
{palette.label}
|
|
</option>
|
|
));
|
|
|
|
return (
|
|
<select
|
|
value={valueIndex}
|
|
onChange={handlePaletteChange}
|
|
className={
|
|
"form-select " +
|
|
"dark:text-nord-5 " +
|
|
"dark:bg-nord-1 " +
|
|
"focus:ring-nord-7 " +
|
|
"focus:border-nord-7 " +
|
|
"block " +
|
|
"w-full " +
|
|
"mt-1"
|
|
}
|
|
>
|
|
{paletteOptions}
|
|
</select>
|
|
);
|
|
}
|
|
|
|
export default PaletteSelect;
|