Palette preview component

This commit is contained in:
CrispyBaguette 2021-12-15 20:05:25 +01:00
parent a5ab1c319f
commit 47dad1d2bb
2 changed files with 37 additions and 0 deletions

View File

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

View File

@ -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;