"use client";

import * as React from "react";

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

export interface AnnouncementBannerProps
  extends React.HTMLAttributes<HTMLDivElement> {
  message: string;
  actionLabel?: string;
  onAction?: () => void;
  icon?: React.ReactNode;
  dismissLabel?: string;
}

export function AnnouncementBanner({
  message,
  actionLabel = "Learn more",
  onAction,
  icon,
  dismissLabel = "Dismiss",
  className,
  ...props
}: AnnouncementBannerProps) {
  const [visible, setVisible] = React.useState(true);

  if (!visible) {
    return null;
  }

  return (
    <div
      className={cn(
        "w-full border border-border bg-card px-4 py-3",
        "shadow-sm",
        className
      )}
      role="status"
      {...props}
    >
      <div className="mx-auto flex w-full max-w-5xl items-center justify-between gap-4">
        <div className="flex items-center gap-3">
          <span className="flex h-9 w-9 items-center justify-center rounded-full bg-muted text-primary">
            {icon ?? <AnnouncementIcon className="h-4 w-4" />}
          </span>
          <p className="text-sm text-foreground">{message}</p>
        </div>

        <div className="flex items-center gap-2">
          <button
            type="button"
            onClick={onAction}
            className={cn(
              "inline-flex items-center rounded-full border border-border",
              "bg-background px-3 py-1.5 text-xs font-semibold text-foreground",
              "transition hover:bg-muted",
              "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-border"
            )}
          >
            {actionLabel}
          </button>
          <button
            type="button"
            onClick={() => setVisible(false)}
            className={cn(
              "inline-flex items-center rounded-full px-3 py-1.5 text-xs",
              "text-muted-foreground transition hover:bg-muted hover:text-foreground",
              "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-border"
            )}
          >
            {dismissLabel}
          </button>
        </div>
      </div>
    </div>
  );
}

function AnnouncementIcon({ className }: { className?: string }) {
  return (
    <svg
      aria-hidden="true"
      className={className}
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      <path d="M4 12a8 8 0 0 1 16 0" />
      <path d="M12 10v4" />
      <path d="M12 18h.01" />
    </svg>
  );
}
Announcement Banner

Dependencies

Files

Installation
