function ColorButton() {
  const [colorState, setColorState] = React.useState("green");
  const [indexState, setIndexState] = React.useState(0);
  const [selectStateA, setSelectStateA] = React.useState("aqua");
  const [selectStateB, setSelectStateB] = React.useState("lightpink");
  const [pickerState, setPickerState] = React.useState(false);
  function pickColor(color) {
    let state = !pickerState;
    if (state) setSelectStateA(color);
    else setSelectStateB(color);
    setPickerState(state);
  }
  let colors = React.useRef([
    "white","mediumvioletred","deeppink","palevioletred","hotpink","lightpink","pink",
    "darkred","red","firebrick","crimson","indianred","lightcoral","salmon","darksalmon","lightsalmon","orangered",
    "tomato","darkorange","coral","orange","darkkhaki","gold","khaki","peachpuff","yellow","moccasin","papayawhip",
    "lightgoldenrodyellow","lemonchiffon","lightyellow","maroon","brown","saddlebrown","sienna","chocolate",
    "peru","rosybrown","goldenrod","sandybrown","tan","burlywood","wheat","navajowhite","bisque","blanchedalmond",
    "cornsilk","darkgreen","green","darkolivegreen","forestgreen","seagreen","olive","olivedrab","mediumseagreen",
    "limegreen","lime","springgreen","mediumspringgreen","darkseagreen","mediumaquamarine","yellowgreen","chartreuse",
    "lightgreen","greenyellow","palegreen","indigo","rebeccapurple","purple","darkmagenta","darkviolet","darkslateblue",
    "blueviolet","darkorchid","fuchsia","magenta","slateblue","mediumslateblue","mediumorchid","mediumpurple","orchid",
    "violet","plum","thistle","lavender","teal","darkcyan","lightseagreen","cadetblue","darkturquoise","turquoise",
    "aqua","cyan","aquamarine","paleturquoise","lightcyan","navy","darkblue","mediumblue","midnightblue","royalblue",
    "steelblue","dodgerblue","deepskyblue","cornflowerblue","skyblue","lightskyblue","lightsteelblue","lightblue",
    "powderblue","black","darkslategrey","dimgrey","slategrey","grey","lightslategrey","darkgrey","silver","lightgrey",
    "gainsboro"
  ]);

  return (
    <>
      <div
        className={"gradient"}
        style={{
          background: `linear-gradient(to right,  ${selectStateA} 0%, ${selectStateB} 100%)`,
        }}
      >
        <span>{selectStateA}</span> <span>{selectStateB}</span>
      </div>
      <div className={"swatch-box"}>
        {colors.current.map((color, index) => {
          return (
            <div
              className={`color-button`}
              style={{ "background-color": `${color}` }}
              onClick={() => pickColor(color)}
            >
              <span>{color}</span>
            </div>
          );
        })}
      </div>
    </>
  );
}