Switch

1import { Switch } from '@/components/ui/switch';
2
3const settings = [
4  { id: 'auto-deploy', label: 'Deploy on push to main', defaultChecked: true },
5  { id: 'preview-urls', label: 'Preview URL for every pull request', defaultChecked: true },
6  { id: 'maintenance', label: 'Maintenance mode', defaultChecked: false },
7];
8
9export function Default() {
10  return (
11    <div className="border-border bg-card w-full max-w-md rounded-xl border">
12      {settings.map((setting) => (
13        <div
14          key={setting.id}
15          className="border-border flex items-center justify-between gap-4 border-b p-3.5 last:border-b-0"
16        >
17          <span id={`${setting.id}-label`} className="text-sm">
18            {setting.label}
19          </span>
20          <Switch aria-labelledby={`${setting.id}-label`} defaultChecked={setting.defaultChecked} />
21        </div>
22      ))}
23    </div>
24  );
25}

1import { Switch } from '@/components/ui/switch';
2
3const settings = [
4  { id: 'auto-deploy', label: 'Deploy on push to main', defaultChecked: true },
5  { id: 'preview-urls', label: 'Preview URL for every pull request', defaultChecked: true },
6  { id: 'maintenance', label: 'Maintenance mode', defaultChecked: false },
7];
8
9export function Default() {
10  return (
11    <div className="border-border bg-card w-full max-w-md rounded-xl border">
12      {settings.map((setting) => (
13        <div
14          key={setting.id}
15          className="border-border flex items-center justify-between gap-4 border-b p-3.5 last:border-b-0"
16        >
17          <span id={`${setting.id}-label`} className="text-sm">
18            {setting.label}
19          </span>
20          <Switch aria-labelledby={`${setting.id}-label`} defaultChecked={setting.defaultChecked} />
21        </div>
22      ))}
23    </div>
24  );
25}

1import { Label } from '@/components/ui/label';
2import { Switch } from '@/components/ui/switch';
3
4const preferences = [
5  {
6    id: 'incident-sms',
7    label: 'Incident SMS',
8    hint: 'Text the on call engineer when a service goes down.',
9    defaultChecked: true,
10  },
11  {
12    id: 'usage-alerts',
13    label: 'Usage alerts',
14    hint: 'Warn the workspace owner at 80% of the plan limit.',
15    defaultChecked: false,
16  },
17];
18
19export function WithLabel() {
20  return (
21    <div className="flex w-full max-w-md flex-col gap-4">
22      {preferences.map((preference) => (
23        <div key={preference.id} className="flex items-start justify-between gap-4">
24          <div className="flex flex-col gap-1">
25            <Label htmlFor={preference.id}>{preference.label}</Label>
26            <span className="text-muted-foreground text-xs">{preference.hint}</span>
27          </div>
28          <Switch
29            id={preference.id}
30            defaultChecked={preference.defaultChecked}
31            className="mt-0.5"
32          />
33        </div>
34      ))}
35    </div>
36  );
37}

1import { Label } from '@/components/ui/label';
2import { Switch } from '@/components/ui/switch';
3
4const features = [
5  {
6    id: 'nightly-backups',
7    label: 'Nightly backups',
8    hint: 'Always on for production projects.',
9    defaultChecked: true,
10  },
11  {
12    id: 'audit-log',
13    label: 'Audit log export',
14    hint: 'Available on the Enterprise plan.',
15    defaultChecked: false,
16  },
17];
18
19export function Disabled() {
20  return (
21    <div className="flex w-full max-w-md flex-col gap-4">
22      {features.map((feature) => (
23        <div key={feature.id} className="flex items-start justify-between gap-4">
24          <div className="flex flex-col gap-1">
25            <Label htmlFor={feature.id} className="opacity-50">
26              {feature.label}
27            </Label>
28            <span className="text-muted-foreground text-xs">{feature.hint}</span>
29          </div>
30          <Switch
31            id={feature.id}
32            defaultChecked={feature.defaultChecked}
33            className="mt-0.5"
34            disabled
35          />
36        </div>
37      ))}
38    </div>
39  );
40}