Promise Toast

"use client";

import { CircleCheckIcon } from "lucide-react";
import PromiseToast from "@/components/ui/promise-toast";
import { ToastProvider } from "@/components/ui/toast";

export default function Default() {
  return (
    <ToastProvider>
      <div className="flex min-h-64 w-full flex-col items-center justify-center gap-5">
        <PromiseToast />
        <div className="w-full max-w-90 select-none rounded-lg border bg-popover text-popover-foreground shadow-lg/5">
          <div className="flex items-center justify-between gap-1.5 px-3.5 py-3 text-sm">
            <div className="flex gap-2">
              <div className="[&>svg]:h-lh [&>svg]:w-4">
                <CircleCheckIcon className="text-success" />
              </div>
              <div className="flex flex-col gap-0.5">
                <span className="font-medium">This is a success toast!</span>
                <span className="text-muted-foreground">
                  Success: Data loaded successfully
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </ToastProvider>
  );
}