UltraQualityToast

// default.tsx
"use client";
import React from "react";
import { ToastProvider, useToast } from "@/components/ui/ultra-quality-toast";

function Demo() {
  const { addToast } = useToast();

  const trigger = (variant: "success" | "error" | "warning" | "info") =>
    addToast({
      variant,
      title: `${variant.charAt(0).toUpperCase() + variant.slice(1)} Notification`,
      description: `This is a ${variant} message.`,
    });

  return (
    <div className="min-h-screen flex flex-col items-center justify-center bg-gray-50 dark:bg-gray-900 p-6">
      <h1 className="text-2xl font-bold mb-4 text-gray-800 dark:text-gray-100">
        Ultra Quality Toast Demo
      </h1>
      <div className="space-x-2">
        {["success", "error", "warning", "info"].map((v) => (
          <button
            key={v}
            onClick={() => trigger(v as any)}
            className={`px-4 py-2 rounded font-medium focus:outline-none focus:ring-2 ${
              {
                success:
                  "bg-green-600 text-white hover:bg-green-700 focus:ring-green-300",
                error:
                  "bg-red-600 text-white hover:bg-red-700 focus:ring-red-300",
                warning:
                  "bg-yellow-600 text-white hover:bg-yellow-700 focus:ring-yellow-300",
                info:
                  "bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-300",
              }[v as any]
            }`}
          >
            {v.charAt(0).toUpperCase() + v.slice(1)}
          </button>
        ))}
      </div>
    </div>
  );
}

export default function Default() {
  return (
    <ToastProvider>
      <Demo />
    </ToastProvider>
  );
}