سونر

1import { Button } from "@/components/ui/button";
2import { Toaster, toast } from "@/components/ui/sonner";
3
4export default function SonnerBasicExample() {
5  return (
6    <>
7      <Toaster />
8      <Button
9        variant="outline"
10        onClick={() =>
11          toast("رویداد ایجاد شد", {
12            description:
13              "یکشنبه، ۳ دسامبر ۲۰۲۳ ساعت ۹:۰۰ صبح",
14            action: {
15              label: "بازگشت",
16              onClick: () => console.log("بازگشت"),
17            },
18          })
19        }
20      >
21        نمایش Toast
22      </Button>
23    </>
24  );
25}
26

1"use client"
2
3import { Button } from "@/components/ui/button"
4import { toast } from "@/components/ui/sonner"
5
6export default function SonnerTypes() {
7  return (
8    <div className="flex flex-wrap gap-2">
9      <Button
10        variant="outline"
11        onClick={() => toast("رویداد ایجاد شد")}
12      >
13        پیش‌فرض
14      </Button>
15      <Button
16        variant="outline"
17        onClick={() => toast.success("رویداد ایجاد شد")}
18      >
19        موفق
20      </Button>
21      <Button
22        variant="outline"
23        onClick={() =>
24          toast.info("۱۰ دقیقه قبل از زمان رویداد در محل حاضر باشید")
25        }
26      >
27        اطلاع
28      </Button>
29      <Button
30        variant="outline"
31        onClick={() =>
32          toast.warning("زمان شروع رویداد نباید قبل از ۸ صبح باشد")
33        }
34      >
35        هشدار
36      </Button>
37      <Button
38        variant="outline"
39        onClick={() => toast.error("رویداد ایجاد نشد")}
40      >
41        خطا
42      </Button>
43    </div>
44  )
45}
46

1import { Button } from "@/components/ui/button";
2import { toast } from "@/components/ui/sonner";
3
4export default function SonnerPosition() {
5  return (
6    <div className="flex flex-wrap justify-center gap-2">
7      <Button
8        variant="outline"
9        onClick={() =>
10          toast("رویداد ایجاد شد", { position: "top-left" })
11        }
12      >
13        بالا چپ
14      </Button>
15      <Button
16        variant="outline"
17        onClick={() =>
18          toast("رویداد ایجاد شد", { position: "top-center" })
19        }
20      >
21        بالا مرکز
22      </Button>
23      <Button
24        variant="outline"
25        onClick={() =>
26          toast("رویداد ایجاد شد", { position: "top-right" })
27        }
28      >
29        بالا راست
30      </Button>
31      <Button
32        variant="outline"
33        onClick={() =>
34          toast("رویداد ایجاد شد", { position: "bottom-left" })
35        }
36      >
37        پایین چپ
38      </Button>
39      <Button
40        variant="outline"
41        onClick={() =>
42          toast("رویداد ایجاد شد", { position: "bottom-center" })
43        }
44      >
45        پایین مرکز
46      </Button>
47      <Button
48        variant="outline"
49        onClick={() =>
50          toast("رویداد ایجاد شد", { position: "bottom-right" })
51        }
52      >
53        پایین راست
54      </Button>
55    </div>
56  );
57}
58