client/src/ImageInput.tsx

@@ -1,5 +1,6 @@
 import React, { FormEventHandler } from "react";
 import Palette, { palettes } from "./Palette";
+import PalettePreview from "./PalettePreview";
 import PaletteSelect from "./PaletteSelect";
 
 interface Props {
@@ -45,6 +46,7 @@ function ImageInput({ onImageSubmit }: Props) {
         <span className="block">Select a color palette:</span>
         <PaletteSelect value={palette} onChange={handlePaletteChange} />
       </label>
+      <PalettePreview palette={palette}></PalettePreview>
       <button
         type="submit"
         value="Go"

client/src/PalettePreview.tsx

@@ -0,0 +1,35 @@
+import Palette from "./Palette";
+
+interface PalettePreviewProps {
+  palette: Palette;
+}
+
+function PalettePreview({ palette }: PalettePreviewProps) {
+  // Build a linear-gradient css string from the palette colors, evenly spaced with hard stops
+  const paletteLength = palette.colors.length;
+  const bandSize = 100 / paletteLength;
+  let gradientPercent = 0;
+  let gradientString = `linear-gradient(90deg, `;
+  for (let i = 0; i < paletteLength; i++) {
+    const color = palette.colors[i];
+    gradientString += `#${color} ${gradientPercent}%, #${color} ${
+      gradientPercent + bandSize
+    }%`;
+    gradientPercent += bandSize;
+
+    if (i !== paletteLength - 1) {
+      gradientString += `, `;
+    } else {
+      gradientString += `)`;
+    }
+  }
+
+  return (
+    <div
+      className="h-5 my-2 border-solid border-2 border-nord-0"
+      style={{ background: gradientString }}
+    ></div>
+  );
+}
+
+export default PalettePreview;