"use client";
import { CheckCircleIcon, HourglassMediumIcon, InfoIcon, XCircleIcon } from "@phosphor-icons/react";
import { toast } from "sonner";
import { Button } from "@/components/ui/button";
import { Toaster } from "@/components/ui/sonner";

export default function SonnerDemo() {
  return (
    <div className="flex flex-wrap gap-3">
      <Toaster position="bottom-right" />
      <Button variant="soft" color="primary" onClick={() => toast.success("Usulan disetujui", { description: "312 suara setuju, 14 abstain." })}>
        <CheckCircleIcon weight="bold" /> Success
      </Button>
      <Button variant="soft" color="danger" onClick={() => toast.error("Kuorum tidak tercapai")}>
        <XCircleIcon weight="bold" /> Error
      </Button>
      <Button variant="soft" color="tertiary" onClick={() => toast.info("Sidang dimulai 10 menit lagi")}>
        <InfoIcon weight="bold" /> Info
      </Button>
      <Button
        variant="soft"
        color="neutral"
        onClick={() =>
          toast.promise(new Promise((r) => setTimeout(r, 1800)), {
            loading: "Menghitung suara...",
            success: "Suara selesai dihitung",
            error: "Gagal menghitung",
          })
        }
      >
        <HourglassMediumIcon weight="bold" /> Promise
      </Button>
    </div>
  );
}
Installation
