"use client";

import * as React from "react";

import { cn } from "@/lib/utils";

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

export interface AlertBannerProps extends React.HTMLAttributes<HTMLDivElement> {
  title: string;
  description?: string;
  variant?: AlertBannerVariant;
  dismissible?: boolean;
  open?: boolean;
  defaultOpen?: boolean;
  onDismiss?: () => void;
}

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

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

export function AlertBanner({
  title,
  description,
  variant = "info",
  dismissible = true,
  open,
  defaultOpen = true,
  onDismiss,
  className,
  ...props
}: AlertBannerProps) {
  const [internalOpen, setInternalOpen] = React.useState(defaultOpen);
  const isOpen = open ?? internalOpen;

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

  if (!isOpen) {
    return null;
  }

  return (
    <div
      role="status"
      aria-live="polite"
      className={cn(
        "w-full border border-border px-4 py-3",
        variantStyles[variant],
        className
      )}
      {...props}
    >
      <div className="flex items-start gap-3">
        <div
          className={cn(
            "flex h-9 w-9 items-center justify-center rounded-full border border-border bg-background",
            iconStyles[variant]
          )}
        >
          <BannerIcon 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}
        </div>
        {dismissible ? (
          <button
            type="button"
            onClick={handleDismiss}
            className="rounded-full border border-border bg-background px-2 py-1 text-sm text-muted-foreground transition hover:text-foreground"
            aria-label="Dismiss banner"
          >
            ×
          </button>
        ) : null}
      </div>
    </div>
  );
}

function BannerIcon({ variant }: { variant: AlertBannerVariant }) {
  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.4}
        >
          <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.4}
        >
          <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.4}
        >
          <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.4}
        >
          <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 type { AlertBannerVariant };
Alert Banner

Dependencies

Files

Installation
