سوئیچ (Switch)

1import { Switch } from "@/components/ui/switch";
2
3export default function BasicExample() {
4  return <Switch />;
5}
6

1import { Switch } from "@/components/ui/switch";
2import { Label } from "@/components/ui/label";
3
4export default function WithLabelExample() {
5  return (
6    <div className="flex items-center space-x-2 space-x-reverse">
7      <Switch id="airplane-mode" />
8      <Label htmlFor="airplane-mode">حالت هواپیما</Label>
9    </div>
10  );
11}
12

1import { Switch } from "@/components/ui/switch";
2import { Label } from "@/components/ui/label";
3
4export default function DefaultCheckedExample() {
5  return (
6    <div className="flex items-center space-x-2 space-x-reverse">
7      <Switch id="notifications" defaultChecked />
8      <Label htmlFor="notifications">اعلان‌ها</Label>
9    </div>
10  );
11}
12

1import { Switch } from "@/components/ui/switch";
2import { Label } from "@/components/ui/label";
3
4export default function DisabledExample() {
5  return (
6    <div className="flex flex-col gap-4">
7      <div className="flex items-center space-x-2 space-x-reverse">
8        <Switch id="disabled-off" disabled />
9        <Label htmlFor="disabled-off" className="opacity-50">
10          غیرفعال شده
11        </Label>
12      </div>
13      <div className="flex items-center space-x-2 space-x-reverse">
14        <Switch id="disabled-on" disabled defaultChecked />
15        <Label htmlFor="disabled-on" className="opacity-50">
16          همیشه فعال
17        </Label>
18      </div>
19    </div>
20  );
21}
22

1import { useState } from "react";
2import { Switch } from "@/components/ui/switch";
3import { Label } from "@/components/ui/label";
4
5export default function ControlledExample() {
6  const [isEnabled, setIsEnabled] = useState(false);
7
8  return (
9    <div className="space-y-4">
10      <div className="flex items-center space-x-2 space-x-reverse">
11        <Switch
12          id="controlled"
13          checked={isEnabled}
14          onCheckedChange={setIsEnabled}
15        />
16        <Label htmlFor="controlled">فعال کردن ویژگی</Label>
17      </div>
18      <p className="text-sm text-muted-foreground">
19        وضعیت فعلی: {isEnabled ? "فعال" : "غیرفعال"}
20      </p>
21    </div>
22  );
23}
24

1import { useState } from "react";
2import { Switch } from "@/components/ui/switch";
3import { Label } from "@/components/ui/label";
4
5export default function WithDescriptionExample() {
6  const [marketing, setMarketing] = useState(true);
7  const [security, setSecurity] = useState(false);
8
9  return (
10    <div className="space-y-6">
11      <div className="flex items-center justify-between">
12        <div className="space-y-0.5">
13          <Label htmlFor="marketing">ایمیل‌های بازاریابی</Label>
14          <p className="text-sm text-muted-foreground">
15            دریافت ایمیل‌ها درباره محصولات جدید و پیشنهادات ویژه
16          </p>
17        </div>
18        <Switch
19          id="marketing"
20          checked={marketing}
21          onCheckedChange={setMarketing}
22        />
23      </div>
24
25      <div className="flex items-center justify-between">
26        <div className="space-y-0.5">
27          <Label htmlFor="security">اعلان‌های امنیتی</Label>
28          <p className="text-sm text-muted-foreground">
29            دریافت اعلان درباره فعالیت‌های مشکوک در حساب کاربری
30          </p>
31        </div>
32        <Switch
33          id="security"
34          checked={security}
35          onCheckedChange={setSecurity}
36        />
37      </div>
38    </div>
39  );
40}
41

1import { useState } from "react";
2import { Switch } from "@/components/ui/switch";
3import { Label } from "@/components/ui/label";
4import { Button } from "@/components/ui/button";
5
6export default function FormExample() {
7  const [airplane, setAirplane] = useState(false);
8
9  return (
10    <form
11      className="space-y-6"
12      onSubmit={(e) => {
13        e.preventDefault();
14        const formData = new FormData(e.currentTarget);
15        console.log("Form data:", Object.fromEntries(formData));
16      }}
17    >
18      <div className="flex items-center justify-between">
19        <div className="space-y-0.5">
20          <Label htmlFor="form-airplane">حالت هواپیما</Label>
21          <p className="text-sm text-muted-foreground">
22            غیرفعال کردن تمام اتصالات بی‌سیم
23          </p>
24        </div>
25        <Switch
26          id="form-airplane"
27          name="airplaneMode"
28          checked={airplane}
29          onCheckedChange={setAirplane}
30        />
31      </div>
32
33      <div className="flex gap-4">
34        <Button type="submit">ذخیره تنظیمات</Button>
35        <Button
36          type="button"
37          variant="outline"
38          onClick={() => {
39            setAirplane(false);
40            console.log("Settings reset");
41          }}
42        >
43          بازنشانی
44        </Button>
45      </div>
46    </form>
47  );
48}
49