new-server/webui/src/primitives/Elements.tsx

import React, {CSSProperties, useMemo} from "react";
import {ColorValue} from "../models/Colors";
// @ts-ignore
import kelvinToRgb from "kelvin-to-rgb";

import "./Elements.sass";
import {kelvinToColorValue, kelvinToRgbHex} from "../helpers/kelvin";

function Element({children}: React.PropsWithChildren<{}>) {
  return (
    <div className="Element">{children}</div>
  )
}

interface ColorElementProps {
  name: string
  value: ColorValue | "hs-gradient" | "k-gradient"
}

export function ColorElement({name, value}: ColorElementProps) {
  const style: CSSProperties = useMemo(() => {
    const s: CSSProperties = {};

    if (value === "hs-gradient") {
      s.backgroundImage = "linear-gradient(to bottom right, red, yellow, green, blue, violet)";
    } else if (value === "k-gradient") {
      s.backgroundImage = "linear-gradient(to bottom right, #ff9329, #ffd6aa, #fffaf4, #fff, #c9e2ff, #40a3ff)";
    } else if (value.kelvin !== undefined && value.kelvin > 0) {
      s.backgroundColor = kelvinToRgbHex(value.kelvin);
    } else {
      const hue = value.h || 0;
      const sat = Math.floor((value.s || 0) * 100);

      s.backgroundColor = `hsl(${hue}, ${sat}%, 50%)`;
    }
    return s;
  }, [value]);

  return (
    <Element>
      <div className="ColorElement-block"
           style={style}
      />
      {name}
    </Element>
  );
}