Palette selector component

client/src/ImageInput.tsx

@@ -1,5 +1,6 @@
 import React, { FormEventHandler } from "react";
 import Palette, { palettes } from "./Palette";
+import PaletteSelect from "./PaletteSelect";
 
 interface Props {
   onImageSubmit: (image: Blob, palette: Palette) => void;
@@ -7,7 +8,7 @@ interface Props {
 
 function ImageInput({ onImageSubmit }: Props) {
   const fileInputRef = React.useRef<HTMLInputElement>(null);
-  const [paletteIndex, setPaletteIndex] = React.useState(0);
+  const [palette, setPalette] = React.useState<Palette>(palettes[0]);
 
   const handleSubmit: FormEventHandler = (e) => {
     e.preventDefault();
@@ -19,11 +20,11 @@ function ImageInput({ onImageSubmit }: Props) {
       return;
     }
 
-    onImageSubmit(fileInputRef.current.files[0], palettes[paletteIndex]);
+    onImageSubmit(fileInputRef.current.files[0], palette);
   };
 
-  const handlePaletteChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+  const handlePaletteChange = (palette: Palette) => {
-    setPaletteIndex(parseInt(event.target.value));
+    setPalette(palette);
   };
 
   return (
@@ -42,17 +43,7 @@ function ImageInput({ onImageSubmit }: Props) {
       </label>
       <label>
         <span className="block">Select a color palette:</span>
-        <select
+        <PaletteSelect value={palette} onChange={handlePaletteChange} />
-          value={paletteIndex}
-          onChange={handlePaletteChange}
-          className="form-select block w-full mt-1"
-        >
-          {palettes.map((palette, i) => (
-            <option key={i} value={i}>
-              {palette.label}
-            </option>
-          ))}
-        </select>
       </label>
       <button
         type="submit"

client/src/Palette.ts

@@ -58,11 +58,7 @@ for (let i = 0; i < 256; i++) {
 }
 const grayScale8bits = new Palette("Gray Scale 8 bits", grayColors);
 
-export const palettes = [
+const palettes = [nord, monokai, grayScale1bit, grayScale2bits, grayScale8bits];
-  nord,
+
-  monokai,
+export { palettes };
-  grayScale1bit,
-  grayScale2bits,
-  grayScale8bits,
-];
 export default Palette;

client/src/PaletteSelect.tsx

@@ -0,0 +1,34 @@
+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 block w-full mt-1"
+    >
+      {paletteOptions}
+    </select>
+  );
+}
+
+export default PaletteSelect;