Announcement Bar

1"use client";
2 
3import * as React from "react";
4import { cn } from "@/lib/utils";
5 
6interface AnnouncementBarProps extends React.HTMLAttributes<HTMLDivElement> {
7  action?: { label: string; onClick?: () => void };
8  dismissible?: boolean;
9  icon?: React.ReactNode;
10  text: string;
11  variant?: "default" | "highlight" | "warning";
12}
13 
14export function AnnouncementBar({
15  text,
16  action,
17  variant = "default",
18  dismissible = true,
19  icon,
20  className,
21  ...props
22}: AnnouncementBarProps) {
23  const [dismissed, setDismissed] = React.useState(false);
24 
25  if (dismissed) {
26    return null;
27  }
28 
29  return (
30    <div
31      data-slot="tron-announcement-bar"
32      className={cn(
33        "relative flex items-center justify-center gap-3 overflow-hidden px-4 py-2 font-mono text-xs",
34        variant === "default" &&
35          "border-primary/30 border-b bg-primary/5 text-foreground/80",
36        variant === "highlight" &&
37          "border-primary/50 border-b bg-primary/10 text-primary",
38        variant === "warning" &&
39          "border-amber-500/30 border-b bg-amber-500/5 text-amber-400/90",
40        className
41      )}
42      {...props}
43    >
44      {/* Scanline */}
45      <div className="pointer-events-none absolute inset-0 bg-[repeating-linear-gradient(0deg,transparent,transparent_2px,rgba(0,0,0,0.03)_2px,rgba(0,0,0,0.03)_4px)]" />
46 
47      {/* Animated border glow */}
48      <div className="pointer-events-none absolute right-0 bottom-0 left-0 h-px">
49        <div
50          className={cn(
51            "h-full w-1/4 bg-gradient-to-r from-transparent to-transparent",
52            variant === "warning" ? "via-amber-500/40" : "via-primary/40"
53          )}
54          style={{ animation: "announceSweep 5s ease-in-out infinite" }}
55        />
56      </div>
57 
58      <style jsx>{`
59        @keyframes announceSweep {
60          0%, 100% { margin-left: -10%; }
61          50% { margin-left: 86%; }
62        }
63      `}</style>
64 
65      <div className="relative flex items-center justify-center gap-3">
66        {icon ? <span className="shrink-0">{icon}</span> : null}
67        <span className="text-center tracking-wide">{text}</span>
68        {action ? (
69          <button
70            type="button"
71            onClick={action.onClick}
72            className={cn(
73              "shrink-0 rounded border px-2.5 py-0.5 text-[10px] uppercase tracking-widest transition-colors",
74              variant === "warning"
75                ? "border-amber-500/40 text-amber-400 hover:bg-amber-500/10"
76// … truncated