audi-app/design-system/.design-sync/previews/Switch.tsx

import * as React from "react";
import { Switch } from "@audi-dash/ui";

function Root({ children }: { children: React.ReactNode }) {
  return (
    <div className="ads-root" data-theme="nacht" style={{ padding: 16, display: "inline-block" }}>
      {children}
    </div>
  );
}

export function On() {
  const [checked, setChecked] = React.useState(true);
  return (
    <Root>
      <Switch checked={checked} onChange={setChecked} aria-label="Benachrichtigungen" />
    </Root>
  );
}

export function Off() {
  const [checked, setChecked] = React.useState(false);
  return (
    <Root>
      <Switch checked={checked} onChange={setChecked} aria-label="Benachrichtigungen" />
    </Root>
  );
}

export function Disabled() {
  return (
    <Root>
      <Switch checked={true} onChange={() => {}} disabled aria-label="Benachrichtigungen" />
    </Root>
  );
}