"use client";

import { Button, ToastProvider, toastManager } from "@countryclub/ui-react";

export default function ToastDemo() {
  return (
    <ToastProvider position="bottom-right">
      <div className="flex flex-wrap items-center justify-center gap-3">
        <Button
          onClick={() =>
            toastManager.add({
              title: "Tee time booked",
              description: "Saturday, 9:40 AM with J. Whitmore.",
            })
          }
          variant="outline"
        >
          Default
        </Button>
        <Button
          onClick={() =>
            toastManager.add({
              type: "success",
              title: "Member added",
              description: "Their welcome email is on the way.",
            })
          }
          variant="outline"
        >
          Success
        </Button>
        <Button
          onClick={() =>
            toastManager.add({
              type: "warning",
              title: "Course closing soon",
              description: "Back nine closes at 6 PM today.",
            })
          }
          variant="outline"
        >
          Warning
        </Button>
        <Button
          onClick={() =>
            toastManager.add({
              type: "error",
              title: "Payment failed",
              description: "The card on file was declined.",
              actionProps: {
                children: "Retry",
                onClick: () => toastManager.add({ title: "Retrying…" }),
              },
            })
          }
          variant="outline"
        >
          Error with action
        </Button>
        <Button
          onClick={() => {
            const id = toastManager.add({
              type: "loading",
              title: "Generating report…",
            });
            setTimeout(() => {
              toastManager.update(id, {
                type: "success",
                title: "Report ready",
                description: "Q2 membership report was generated.",
              });
            }, 2000);
          }}
          variant="outline"
        >
          Loading → Success
        </Button>
      </div>
    </ToastProvider>
  );
}
Toast

Import

Default
