"use client";

import * as React from "react";
import { cn } from "@/lib/utils";

type ToastVariant = "success" | "error" | "warning" | "info";

const variantStyles: Record<ToastVariant, string> = {
  success: "bg-accent text-foreground",
  error: "bg-background text-foreground",
  warning: "bg-muted text-foreground",
  info: "bg-card text-foreground",
};

const iconStyles: Record<ToastVariant, string> = {
  success: "text-primary",
  error: "text-foreground",
  warning: "text-muted-foreground",
  info: "text-muted-foreground",
};

export interface NotificationToastProps
  extends React.HTMLAttributes<HTMLDivElement> {
  title: string;
  description?: string;
  variant?: ToastVariant;
  duration?: number;
  autoDismiss?: boolean;
  open?: boolean;
  defaultOpen?: boolean;
  actionLabel?: string;
  onAction?: () => void;
  onDismiss?: () => void;
}

function NotificationToast({
  title,
  description,
  variant = "info",
  duration = 4000,
  autoDismiss = true,
  open,
  defaultOpen = true,
  actionLabel,
  onAction,
  onDismiss,
  className,
  ...props
}: NotificationToastProps) {
  const [internalOpen, setInternalOpen] = React.useState(defaultOpen);
  const isOpen = open ?? internalOpen;

  const handleDismiss = React.useCallback(() => {
    if (open === undefined) {
      setInternalOpen(false);
    }
    onDismiss?.();
  }, [onDismiss, open]);

  React.useEffect(() => {
    if (!isOpen || !autoDismiss) {
      return;
    }

    const timeout = window.setTimeout(() => {
      handleDismiss();
    }, duration);

    return () => window.clearTimeout(timeout);
  }, [autoDismiss, duration, handleDismiss, isOpen]);

  if (!isOpen) {
    return null;
  }

  return (
    <div
      role="status"
      aria-live="polite"
      className={cn(
        "relative w-full max-w-sm overflow-hidden rounded-xl border border-border p-4 shadow-sm",
        variantStyles[variant],
        className
      )}
      {...props}
    >
      <div className="flex items-start gap-3">
        <div
          className={cn(
            "flex h-10 w-10 items-center justify-center rounded-full border border-border bg-card",
            iconStyles[variant]
          )}
        >
          <ToastIcon variant={variant} />
        </div>
        <div className="flex-1 space-y-1">
          <p className="text-sm font-semibold text-foreground">{title}</p>
          {description ? (
            <p className="text-sm text-muted-foreground">{description}</p>
          ) : null}
          {actionLabel ? (
            <button
              type="button"
              onClick={onAction}
              className="text-sm font-medium text-primary transition-colors hover:text-foreground"
            >
              {actionLabel}
            </button>
          ) : null}
        </div>
        <button
          type="button"
          onClick={handleDismiss}
          className="rounded-full border border-border bg-card px-2 py-1 text-sm text-muted-foreground transition-colors hover:text-foreground"
          aria-label="Dismiss notification"
        >
          ×
        </button>
      </div>
    </div>
  );
}

function ToastIcon({ variant }: { variant: ToastVariant }) {
  switch (variant) {
    case "success":
      return (
        <svg
          viewBox="0 0 24 24"
          aria-hidden="true"
          className="h-5 w-5"
          fill="none"
          stroke="currentColor"
          strokeWidth={2.5}
        >
          <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
        </svg>
      );
    case "error":
      return (
        <svg
          viewBox="0 0 24 24"
          aria-hidden="true"
          className="h-5 w-5"
          fill="none"
          stroke="currentColor"
          strokeWidth={2.5}
        >
          <path strokeLinecap="round" strokeLinejoin="round" d="M6 6l12 12" />
          <path strokeLinecap="round" strokeLinejoin="round" d="M18 6l-12 12" />
        </svg>
      );
    case "warning":
      return (
        <svg
          viewBox="0 0 24 24"
          aria-hidden="true"
          className="h-5 w-5"
          fill="none"
          stroke="currentColor"
          strokeWidth={2.5}
        >
          <path
            strokeLinecap="round"
            strokeLinejoin="round"
            d="M12 8v5m0 3h.01"
          />
          <path
            strokeLinecap="round"
            strokeLinejoin="round"
            d="M10.5 3.5h3L21 18.5H3L10.5 3.5z"
          />
        </svg>
      );
    default:
      return (
        <svg
          viewBox="0 0 24 24"
          aria-hidden="true"
          className="h-5 w-5"
          fill="none"
          stroke="currentColor"
          strokeWidth={2.5}
        >
          <circle cx="12" cy="12" r="9" />
          <path strokeLinecap="round" strokeLinejoin="round" d="M12 8v4" />
          <circle cx="12" cy="16" r="1" fill="currentColor" stroke="none" />
        </svg>
      );
  }
}

export { NotificationToast };
Notification Toast

Dependencies

Files

Installation
