Colour picker

let reader = Specimen_Reader.reader

let swatches: array<KitReact.Roles.ColourPicker.swatch> = [
  {value: "#c0392b", name: "Red"},
  {value: "#d35400", name: "Orange"},
  {value: "#f1c40f", name: "Yellow"},
  {value: "#27ae60", name: "Green"},
  {value: "#2980b9", name: "Blue"},
  {value: "#8e44ad", name: "Purple"},
  {value: "#7f8c8d", name: "Grey"},
]

@react.component
let make = () => {
  <>
    <KitReact.Roles.FormGroup
      id="react-colour-label" printedValue={React.string("Blue")}
      label={React.string("Label colour")}
      kind={KitReact.Roles.ColourPicker.controlSet({name: "label_colour", reader, value: "#2980b9", swatches, custom: true})}
    />
    <KitReact.Roles.FormGroup
      id="react-colour-calendar" printedValue={React.string("Dark slate blue")}
      label={React.string("Calendar colour")}
      kind={KitReact.Roles.ColourPicker.controlSet({name: "calendar_colour", reader, value: "#483d8b", swatches, custom: true})}
    />
  <KitReact.Roles.FormGroup
    id="react-colour-calendar-disabled" printedValue={React.string("Dark slate blue")}
    label={React.string("Calendar colour")}
    help={React.string("Only the owner can change this.")}
    kind={KitReact.Roles.ColourPicker.controlSet({name: "calendar_colour_locked", reader, value: "#483d8b", swatches, custom: true, disabled: true})}
  />
  </>
}

@react.component
let make = () => {
  <KitReact.Roles.FormGroup
    id="react-colour-tag" printedValue={React.string("Dark slate blue")}
    label={React.string("Tag colour")}
    kind={KitReact.Roles.ColourPicker.controlSet({
      name: "tag_colour",
      reader: Specimen_Reader.reader,
      value: "#483d8b",
      swatches: Role_ColourPicker.swatches,
      custom: true,
    })}
  />
}