frigate/web/src/routes/StyleGuide.jsx

import { h } from 'preact';
import ArrowDropdown from '../icons/ArrowDropdown';
import ArrowDropup from '../icons/ArrowDropup';
import Button from '../components/Button';
import Heading from '../components/Heading';
import Select from '../components/Select';
import Switch from '../components/Switch';
import TextField from '../components/TextField';
import { useCallback, useState } from 'preact/hooks';

export default function StyleGuide() {
  const [switches, setSwitches] = useState({ 0: false, 1: true, 2: false, 3: false });

  const handleSwitch = useCallback(
    (id, checked) => {
      setSwitches({ ...switches, [id]: checked });
    },
    [switches]
  );

  return (
    <div>
      <Heading size="md">Button</Heading>
      <div className="flex space-x-4 mb-4">
        <Button>Default</Button>
        <Button color="red">Danger</Button>
        <Button color="green">Save</Button>
        <Button color="gray">Gray</Button>
        <Button disabled>Disabled</Button>
      </div>
      <div className="flex space-x-4 mb-4">
        <Button type="text">Default</Button>
        <Button color="red" type="text">
          Danger
        </Button>
        <Button color="green" type="text">
          Save
        </Button>
        <Button color="gray" type="text">
          Gray
        </Button>
        <Button disabled type="text">
          Disabled
        </Button>
      </div>
      <div className="flex space-x-4 mb-4">
        <Button type="outlined">Default</Button>
        <Button color="red" type="outlined">
          Danger
        </Button>
        <Button color="green" type="outlined">
          Save
        </Button>
        <Button color="gray" type="outlined">
          Gray
        </Button>
        <Button disabled type="outlined">
          Disabled
        </Button>
      </div>

      <Heading size="md">Switch</Heading>
      <div className="flex-col space-y-4 max-w-4xl">
        <Switch label="Disabled, off" labelPosition="after" />
        <Switch label="Disabled, on" labelPosition="after" checked />
        <Switch
          label="Enabled, (off initial)"
          labelPosition="after"
          checked={switches[0]}
          id={0}
          onChange={handleSwitch}
        />
        <Switch
          label="Enabled, (on initial)"
          labelPosition="after"
          checked={switches[1]}
          id={1}
          onChange={handleSwitch}
        />

        <Switch checked={switches[2]} id={2} label="Label before" onChange={handleSwitch} />
        <Switch checked={switches[3]} id={3} label="Label after" labelPosition="after" onChange={handleSwitch} />
      </div>

      <Heading size="md">Select</Heading>
      <div className="flex space-x-4 mb-4 max-w-4xl">
        <Select label="Basic select box" options={['All', 'None', 'Other']} selected="None" />
      </div>

      <Heading size="md">TextField</Heading>
      <div className="flex-col space-y-4 max-w-4xl">
        <TextField label="Default text field" />
        <TextField label="Pre-filled" value="This is my pre-filled value" />
        <TextField label="With help" helpText="This is some help text" />
        <TextField label="Leading icon" leadingIcon={ArrowDropdown} />
        <TextField label="Trailing icon" trailingIcon={ArrowDropup} />
      </div>
    </div>
  );
}