Segmented control

let views: KitReact.Roles.SegmentedControl.options = Three(
  {value: "list", icon: KitReact.Icons.iconList, content: React.string("List")},
  {value: "board", icon: KitReact.Icons.iconKanban, content: React.string("Board")},
  {value: "calendar", icon: KitReact.Icons.iconCalendarBlank, content: React.string("Calendar")},
)

@react.component
let make = () => {
  <>
    <KitReact.Roles.FormGroup
      id="react-segmented-charge" printedValue={React.string("Day")}
      label={React.string("Charge by")}
      help={React.string("Applies to every booking of this room.")}
      kind={KitReact.Roles.SegmentedControl.controlSet({
        name: "charge",
        value: "day",
        options: Three(
          {value: "hour", content: React.string("Hour")},
          {value: "day", content: React.string("Day")},
          {value: "week", content: React.string("Week")},
        ),
      })}
    />
    <p className="specimen-case-line"> {React.string("Charge by while bookings cannot be changed.")} </p>
    <KitReact.Roles.FormGroup
      id="react-segmented-charge-disabled" printedValue={React.string("Day")}
      label={React.string("Charge by")}
      kind={KitReact.Roles.SegmentedControl.controlSet({
        name: "charge-disabled",
        value: "day",
        options: Three(
          {value: "hour", content: React.string("Hour"), props: {disabled: true}},
          {value: "day", content: React.string("Day"), props: {disabled: true}},
          {value: "week", content: React.string("Week"), props: {disabled: true}},
        ),
      })}
    />
    <KitReact.Roles.FormGroup
      id="react-segmented-view"
      label={React.string("Show bookings as")}
      kind={KitReact.Roles.SegmentedControl.controlSet({name: "view", value: "list", options: views})}
    />
    <KitReact.Roles.FormGroup
      id="react-segmented-view-narrow"
      label={React.string("Show bookings as")}
      props={{style: {inlineSize: "var(--kit-field-medium)"}}}
      kind={KitReact.Roles.SegmentedControl.controlSet({name: "view-narrow", value: "board", options: views})}
    />
  </>
}