Anomaly Banner

1"use client";
2 
3import type * as React from "react";
4import { cn } from "@/lib/utils";
5 
6export interface AnomalyBannerProps
7  extends React.HTMLAttributes<HTMLDivElement> {
8  animated?: boolean;
9  subtitle?: string;
10  title?: string;
11}
12 
13export function AnomalyBanner({
14  title = "ANOMALY FOUND",
15  subtitle,
16  animated = true,
17  className,
18  ...props
19}: AnomalyBannerProps) {
20  return (
21    <div className={cn("relative w-full", className)} {...props}>
22      {/* Top line with brackets */}
23      <div className="flex items-center">
24        <div className="h-px flex-1 bg-gradient-to-r from-transparent to-amber-500/50" />
25        <span className="px-4 font-mono text-[10px] text-amber-500/70 tracking-[0.5em]">
26          [ ALERT ]
27        </span>
28        <div className="h-px flex-1 bg-gradient-to-l from-transparent to-amber-500/50" />
29      </div>
30 
31      {/* Main content */}
32      <div className="relative my-4 overflow-hidden">
33        {/* Scan line effect */}
34        {animated ? (
35          <div
36            className="absolute inset-0 bg-gradient-to-b from-amber-500/10 via-transparent to-transparent"
37            style={{
38              animation: "tron-anomaly-scan 2s linear infinite",
39            }}
40          />
41        ) : null}
42 
43        <div className="text-center">
44          {subtitle ? (
45            <div className="mb-2 font-mono text-amber-500/60 text-sm tracking-[0.3em]">
46              {subtitle}
47            </div>
48          ) : null}
49          <h2
50            data-slot="tron-anomaly-title"
51            className={cn(
52              "font-black font-display text-4xl text-amber-500 tracking-[0.2em] md:text-5xl lg:text-6xl",
53              animated && "animate-pulse"
54            )}
55          >
56            {title}
57          </h2>
58        </div>
59      </div>
60 
61      {/* Bottom line */}
62      <div className="flex items-center">
63        <div className="h-px flex-1 bg-gradient-to-r from-transparent to-amber-500/50" />
64        <div className="mx-4 flex gap-2">
65          {[...new Array(5)].map((_, i) => (
66            <div
67              key={i}
68              className={cn(
69                "h-1.5 w-1.5 bg-amber-500",
70                animated && "animate-pulse",
71                i % 2 === 0 ? "opacity-100" : "opacity-50"
72              )}
73              style={{ animationDelay: `${i * 0.1}s` }}
74            />
75          ))}
76        </div>
77        <div className="h-px flex-1 bg-gradient-to-l from-transparent to-amber-500/50" />
78      </div>
79 
80      <style jsx>{`
81// … truncated