Switch

// owner: Sona
"use client";

import * as React from "react";

import { Switch } from "@/components/ui/switch";

export default function SwitchExample() {
  const [settings, setSettings] = React.useState({
    alerts: true,
    marketing: false,
  });

  return (
    <div className="space-y-4">
      <label className="flex items-center justify-between gap-4 text-sm">
        <div>
          <p className="font-medium">Incident alerts</p>
          <p className="text-muted-foreground">
            Send push notifications for live incidents.
          </p>
        </div>
        <Switch
          checked={settings.alerts}
          onCheckedChange={(value) =>
            setSettings((prev) => ({ ...prev, alerts: Boolean(value) }))
          }
        />
      </label>
      <label className="flex items-center justify-between gap-4 text-sm">
        <div>
          <p className="font-medium">Marketing updates</p>
          <p className="text-muted-foreground">
            Occasional product announcements.
          </p>
        </div>
        <Switch
          checked={settings.marketing}
          onCheckedChange={(value) =>
            setSettings((prev) => ({ ...prev, marketing: Boolean(value) }))
          }
        />
      </label>
    </div>
  );
}