From 47dad1d2bb28855e909719316a296447e4009cf0 Mon Sep 17 00:00:00 2001
From: CrispyBaguette <alexandre.bruyant@gmail.com>
Date: Wed, 15 Dec 2021 20:05:25 +0100
Subject: [PATCH] Palette preview component

---
 client/src/ImageInput.tsx     |  2 ++
 client/src/PalettePreview.tsx | 35 +++++++++++++++++++++++++++++++++++
 2 files changed, 37 insertions(+)
 create mode 100644 client/src/PalettePreview.tsx

diff --git a/client/src/ImageInput.tsx b/client/src/ImageInput.tsx
index e8e113e..3156e88 100644
--- a/client/src/ImageInput.tsx
+++ b/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"
diff --git a/client/src/PalettePreview.tsx b/client/src/PalettePreview.tsx
new file mode 100644
index 0000000..23941c7
--- /dev/null
+++ b/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;