Switch

import { FormField } from "@camome/core/FormField";
import { Switch } from "@camome/core/Switch";

export default function Default() {
  return (
    <FormField
      label="Label"
      description="Description text"
      error="This is an error"
      custom
    >
      <div style={{ display: "flex", gap: "2rem", alignItems: "center" }}>
        <div
          style={{ display: "flex", flexDirection: "column", gap: "0.3rem" }}
        >
          <FormField.Label />
          <FormField.Description />
        </div>
        <Switch size="md" />
      </div>
    </FormField>
  );
}

import { FormField } from "@camome/core/FormField";
import { Switch } from "@camome/core/Switch";

import styles from "./styles.module.scss";

export default function Size() {
  return (
    <div className={styles.size__container}>
      <FormField label="Small">
        <Switch size="sm" />
      </FormField>
      <FormField label="Medium">
        <Switch size="md" />
      </FormField>
      <FormField label="Large">
        <Switch size="lg" />
      </FormField>
    </div>
  );
}

import MoonIcon from "@heroicons/react/24/outline/MoonIcon";
import SunIcon from "@heroicons/react/24/outline/SunIcon";

import { Switch } from "@camome/core/Switch";

import styles from "./styles.module.scss";

export default function Default() {
  return (
    <Switch
      size="lg"
      on={<SunIcon width="1.2rem" height="1.2rem" strokeWidth={2.5} />}
      off={<MoonIcon width="1.2rem" height="1.2rem" strokeWidth={2.5} />}
      aria-label="Switch"
      className={styles.withIcon}
    />
  );
}