frontPanel/src/ui_kit/CircleColorPicker.tsx

import { ButtonBase } from "@mui/material";
import { startTransition, useRef } from "react";

interface Props {
  color: string;
  onChange: (color: string) => void;
}

export default function CircleColorPicker({ color, onChange }: Props) {
  const inputRef = useRef<HTMLInputElement>(null);

  return (
    <ButtonBase
      onClick={() => inputRef.current?.click()}
      sx={{
        aspectRatio: 1,
        height: "22px",
        width: "22px",
        minWidth: "22px",
        borderRadius: "50%",
        backgroundColor: color,
        border: "1px solid #4D4D4D",
      }}
    >
      <input
        ref={inputRef}
        type="color"
        value={color}
        onChange={(e) => {
          startTransition(() => {
            onChange(e.target.value);
          });
        }}
        style={{
          opacity: 0,
          cursor: "pointer",
        }}
      />
    </ButtonBase>
  );
}