Function CustomColor

docs/src/components/DynamicColorTheme.tsx:246–316

({
  name,
  color,
  index,
  uniqKey,
  setCustomColor,
  deleteCustomColor,
  setCustomName,
}: {
  name: string;
  color: string;
  uniqKey: string;
  index: number;
  setCustomColor: (key: string, hex: string) => void;
  deleteCustomColor: (key: string) => void;
  setCustomName: (key: string, name: string) => void;
})

};

const CustomColor = ({
  name,
  color,
  index,
  uniqKey,
  setCustomColor,
  deleteCustomColor,
  setCustomName,
}: {
  name: string;
  color: string;
  uniqKey: string;
  index: number;
  setCustomColor: (key: string, hex: string) => void;
  deleteCustomColor: (key: string) => void;
  setCustomName: (key: string, name: string) => void;
}) => {
  // const [colorName, setColorName] = useState<string>(name);

  const onNameChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    event.preventDefault();
    setCustomName(uniqKey, event.target.value);
  };

  if (name) {
    return (
      <tr>
        <td>
          Custom color #{index + 1}:{' '}
          <input
            value={name}
            onChange={onNameChange}
            className="color-picker-name-input"
          />
        </td>
        <td>
          <ColorPicker
            color={color}
            setColor={(hex) => setCustomColor(uniqKey, hex)}
            additional
          />
          <button
            className="color-picker-button-cancel"
            onClick={() => deleteCustomColor(uniqKey)}
          >
            ✕
          </button>
        </td>
      </tr>
    );
  }

  return (
    <tr>
      <td colSpan={2}>
        Custom color #{index + 1}:{' '}
        <input
          value={name}