// Plaaayground v2 — AnnouncementBar
// Blueprint: 01 — Sticky top banner, closeable, product updates / trial expiry

import { useState } from "react";
import { AnimatePresence, motion } from "framer-motion";
import { X } from "lucide-react";
import { cva, type VariantProps } from "class-variance-authority";
import { spring } from "@/lib/motion";
import { cn } from "@/lib/utils";

const barVariants = cva(
  "fixed top-0 inset-x-0 z-50 flex items-center justify-center gap-3 px-4 text-sm font-medium",
  {
    variants: {
      variant: {
        brand: "bg-primary text-primary-foreground",
        info: "bg-secondary text-secondary-foreground",
        warning: "bg-amber-100 text-amber-900 border-b border-amber-200",
        success: "bg-emerald-100 text-emerald-900 border-b border-emerald-200",
      },
      size: {
        sm: "h-8 text-xs",
        default: "h-10",
      },
    },
    defaultVariants: {
      variant: "brand",
      size: "default",
    },
  }
);

export interface AnnouncementBarProps
  extends VariantProps<typeof barVariants> {
  message: string;
  action?: { label: string; href: string };
  onClose?: () => void;
  className?: string;
}

export function AnnouncementBar({
  message,
  action,
  onClose,
  variant,
  size,
  className,
}: AnnouncementBarProps) {
  const [visible, setVisible] = useState(true);

  function handleClose() {
    setVisible(false);
    onClose?.();
  }

  return (
    <AnimatePresence>
      {visible && (
        <motion.div
          className={cn(barVariants({ variant, size }), className)}
          initial={{ y: -40, opacity: 0 }}
          animate={{ y: 0, opacity: 1 }}
          exit={{ y: -40, opacity: 0 }}
          transition={spring.snappy}
        >
          <span>{message}</span>
          {action && (
            <a
              href={action.href}
              className="underline underline-offset-2 font-semibold hover:opacity-80 transition-opacity"
            >
              {action.label}
            </a>
          )}
          <button
            onClick={handleClose}
            className="absolute right-3 p-1 hover:bg-black/10 transition-colors"
            aria-label="Dismiss announcement"
          >
            <X className="w-3.5 h-3.5" />
          </button>
        </motion.div>
      )}
    </AnimatePresence>
  );
}
AnnouncementBar

Source Code
