Banner Announcement

1"use client";
2 
3import * as React from "react";
4import { cn } from "@/lib/utils";
5import { ArrowRight, X } from "lucide-react";
6 
7export interface BannerAnnouncementProps {
8  children: React.ReactNode;
9  badge?: string;
10  action?: { label: string; href: string };
11  dismissible?: boolean;
12  onDismiss?: () => void;
13  className?: string;
14}
15 
16export function BannerAnnouncement({
17  children,
18  badge,
19  action,
20  dismissible = true,
21  onDismiss,
22  className,
23}: BannerAnnouncementProps) {
24  const [mounted, setMounted] = React.useState(false);
25  const [dismissed, setDismissed] = React.useState(false);
26 
27  React.useEffect(() => {
28    requestAnimationFrame(() => {
29      requestAnimationFrame(() => setMounted(true));
30    });
31  }, []);
32 
33  const handleDismiss = () => {
34    setDismissed(true);
35    if (onDismiss) setTimeout(onDismiss, 350);
36  };
37 
38  return (
39    <div
40      className={cn(
41        "grid transition-[grid-template-rows] ease-[cubic-bezier(0.16,1,0.3,1)]",
42        mounted && !dismissed
43          ? "[grid-template-rows:1fr] duration-500"
44          : "[grid-template-rows:0fr] duration-300",
45      )}
46    >
47      <div className="overflow-hidden">
48        <div
49          className={cn(
50            "relative flex items-center justify-center gap-2.5 border-b px-10 py-2.5 text-sm",
51            "bg-muted/40",
52            /* ── shimmer sweep ── */
53            "before:pointer-events-none before:absolute before:inset-0",
54            "before:bg-[length:250%_100%] before:bg-no-repeat",
55            "before:bg-[linear-gradient(110deg,transparent_30%,hsl(var(--foreground)/0.04)_44%,hsl(var(--foreground)/0.08)_50%,hsl(var(--foreground)/0.04)_56%,transparent_70%)]",
56            "before:animate-[banner-shimmer_1.8s_ease-out_0.3s_1_both]",
57            /* ── content fade on dismiss ── */
58            "transition-[opacity,transform] duration-150",
59            dismissed && "opacity-0 -translate-y-1",
60            className,
61          )}
62        >
63          {badge && (
64            <span className="shrink-0 rounded-full bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary">
65              {badge}
66            </span>
67          )}
68 
69          <p className="text-center font-medium text-foreground/80">
70            {children}
71          </p>
72 
73          {action && (
74            <a
75              href={action.href}
76              className="group inline-flex shrink-0 items-center gap-0.5 font-semibold text-foreground transition-colors hover:text-foreground/70"
77            >
78// … truncated