Sonner (Toast)

"use client";

import { Button } from "@dashboardpack/core/components/ui/button";
import { Toaster } from "@dashboardpack/core/components/ui/sonner";
import type { ReactNode } from "react";
import { toast } from "sonner";

export default function SonnerExample() {
  return (
    <div className="flex flex-wrap gap-3">
      <Button
        variant="outline"
        onClick={() =>
          toast("Your report is ready", {
            description: "You can download it from the reports page.",
          })
        }
      >
        Default toast
      </Button>
      <Button variant="outline" onClick={() => toast.success("Changes saved")}>
        Success
      </Button>
      <Button
        variant="outline"
        onClick={() => toast.error("Unable to save. Please try again.")}
      >
        Error
      </Button>
      <Button
        variant="outline"
        onClick={() =>
          toast("Project archived", {
            action: {
              label: "Undo",
              onClick: () => toast.success("Project restored"),
            },
          })
        }
      >
        With action
      </Button>
    </div>
  );
}

// Shell setup only: Apex already includes a Toaster in its root layout.
// Use this wrapper only when integrating the component into another application.
export function ToastShellExample({ children }: { children: ReactNode }) {
  return (
    <>
      {children}
      <Toaster richColors closeButton />
    </>
  );
}