"use client";

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

type SnackbarVariant = "default" | "success" | "error" | "warning";

const variantStyles: Record<SnackbarVariant, string> = {
  default: "bg-card text-foreground",
  success: "bg-primary text-foreground",
  error: "bg-destructive text-foreground",
  warning: "bg-muted text-foreground",
};

export interface SnackbarProps extends React.HTMLAttributes<HTMLDivElement> {
  message: string;
  variant?: SnackbarVariant;
  duration?: number;
  open?: boolean;
  defaultOpen?: boolean;
  actionLabel?: string;
  onAction?: () => void;
  onClose?: () => void;
  position?: "bottom-center" | "bottom-left" | "bottom-right";
}

const positionStyles: Record<string, string> = {
  "bottom-center": "bottom-4 left-1/2 -translate-x-1/2",
  "bottom-left": "bottom-4 left-4",
  "bottom-right": "bottom-4 right-4",
};

function Snackbar({
  message,
  variant = "default",
  duration = 4000,
  open,
  defaultOpen = true,
  actionLabel,
  onAction,
  onClose,
  position = "bottom-center",
  className,
  ...props
}: SnackbarProps) {
  const [internalOpen, setInternalOpen] = React.useState(defaultOpen);
  const [isVisible, setIsVisible] = React.useState(false);
  const isOpen = open ?? internalOpen;

  const handleClose = React.useCallback(() => {
    setIsVisible(false);
    const timeout = setTimeout(() => {
      if (open === undefined) {
        setInternalOpen(false);
      }
      onClose?.();
    }, 150);
    return () => clearTimeout(timeout);
  }, [onClose, open]);

  React.useEffect(() => {
    if (isOpen) {
      const showTimeout = setTimeout(() => setIsVisible(true), 10);
      return () => clearTimeout(showTimeout);
    }
  }, [isOpen]);

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

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

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

  if (!isOpen) {
    return null;
  }

  return (
    <div
      role="status"
      aria-live="polite"
      className={cn(
        "fixed z-50 flex min-w-72 max-w-md items-center gap-3 rounded-lg px-4 py-3 shadow-lg transition-all duration-150",
        isVisible ? "translate-y-0 opacity-100" : "translate-y-2 opacity-0",
        variantStyles[variant],
        positionStyles[position],
        className
      )}
      {...props}
    >
      <p className="flex-1 text-sm font-medium">{message}</p>
      {actionLabel ? (
        <button
          type="button"
          onClick={() => {
            onAction?.();
            handleClose();
          }}
          className={cn(
            "shrink-0 text-sm font-semibold uppercase tracking-wide transition-opacity hover:opacity-80",
            variant === "default"
              ? "text-primary"
              : "text-foreground underline underline-offset-2"
          )}
        >
          {actionLabel}
        </button>
      ) : null}
      <button
        type="button"
        onClick={handleClose}
        className="ml-1 shrink-0 rounded p-0.5 text-foreground opacity-70 transition-opacity hover:opacity-100"
        aria-label="Close"
      >
        <svg
          viewBox="0 0 24 24"
          aria-hidden="true"
          className="h-4 w-4"
          fill="none"
          stroke="currentColor"
          strokeWidth={2}
        >
          <path strokeLinecap="round" strokeLinejoin="round" d="M6 6l12 12M18 6l-12 12" />
        </svg>
      </button>
    </div>
  );
}

export { Snackbar };
Snackbar

Dependencies

Files

Installation
