Control card

import { SwitchCard } from "@clawscale/react";

export default function ControlCardSwitch() {
  return (
    <>
      <SwitchCard defaultChecked style={{ width: 240 }}>
        Alert on failed runs
      </SwitchCard>
      <SwitchCard style={{ width: 240 }}>Alert on slow runs</SwitchCard>
    </>
  );
}

import { CheckboxCard } from "@clawscale/react";

export default function ControlCardCheckbox() {
  return (
    <>
      <CheckboxCard defaultChecked label="us-east-1" />
      <CheckboxCard defaultChecked label="eu-west-1" />
      <CheckboxCard label="ap-southeast-2" />
    </>
  );
}

import { RadioCard, RadioGroup } from "@clawscale/react";
import { useState } from "react";

export default function ControlCardRadio() {
  const [size, setSize] = useState("medium");
  return (
    <RadioGroup
      name="warehouse-size"
      aria-label="Warehouse size"
      selectedValue={size}
      onChange={(event) => setSize(event.currentTarget.value)}
      style={{ display: "grid", gap: 8, width: 280 }}
    >
      <RadioCard label="Small: 2 vCPU, 8 GB" value="small" />
      <RadioCard label="Medium: 8 vCPU, 32 GB" value="medium" />
      <RadioCard label="Large: 32 vCPU, 128 GB" value="large" />
    </RadioGroup>
  );
}

import { CardList, SwitchCard } from "@clawscale/react";

export default function ControlCardList() {
  return (
    <CardList role="group" aria-label="Pipeline options" style={{ maxWidth: 400 }}>
      <SwitchCard defaultChecked>Run on schedule</SwitchCard>
      <SwitchCard defaultChecked>Retry failed steps</SwitchCard>
      <SwitchCard>Notify on success</SwitchCard>
      <SwitchCard>Keep intermediate files</SwitchCard>
    </CardList>
  );
}