Alert

1"use client";
2 
3import type * as React from "react";
4import { cn } from "@/lib/utils";
5 
6interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
7  animated?: boolean;
8  variant?: "warning" | "danger" | "info" | "success";
9}
10 
11export function Alert({
12  children,
13  variant = "warning",
14  animated = true,
15  className,
16  ...props
17}: AlertProps) {
18  const variantStyles = {
19    danger: "bg-red-500/90 text-white border-red-400",
20    info: "bg-cyan-500/90 text-black border-cyan-400",
21    success: "bg-green-500/90 text-black border-green-400",
22    warning: "bg-amber-500/90 text-black border-amber-400",
23  };
24 
25  return (
26    <div
27      className={cn(
28        "relative inline-flex items-center justify-center",
29        "border-y-2 px-6 py-2",
30        "font-bold font-mono text-sm uppercase tracking-[0.2em]",
31        variantStyles[variant],
32        animated && "animate-pulse",
33        className
34      )}
35      {...props}
36    >
37      {/* Left bracket decoration */}
38      <span className="absolute top-1/2 -left-1 -translate-y-1/2 text-lg">
39        [
40      </span>
41 
42      {children}
43 
44      {/* Right bracket decoration */}
45      <span className="absolute top-1/2 -right-1 -translate-y-1/2 text-lg">
46        ]
47      </span>
48    </div>
49  );
50}
51 
52interface AlertBannerProps extends React.HTMLAttributes<HTMLDivElement> {
53  subtitle?: string;
54  title: string;
55  variant?: "warning" | "danger" | "info";
56}
57 
58export function AlertBanner({
59  title,
60  subtitle,
61  variant = "warning",
62  className,
63  ...props
64}: AlertBannerProps) {
65  const variantStyles = {
66    danger: {
67      bg: "bg-red-500/10",
68      border: "border-red-500/50",
69      text: "text-red-500",
70    },
71    info: {
72      bg: "bg-cyan-500/10",
73      border: "border-cyan-500/50",
74      text: "text-cyan-500",
75    },
76    warning: {
77      bg: "bg-amber-500/10",
78      border: "border-amber-500/50",
79      text: "text-amber-500",
80    },
81  };
82 
83  const styles = variantStyles[variant];
84 
85  return (
86    <div
87      data-slot="tron-alert-banner"
88      data-variant={variant}
89      className={cn(
90        "relative overflow-hidden rounded-sm border",
91        styles.bg,
92        styles.border,
93        className
94      )}
95      {...props}
96    >
97      {/* Animated scan line */}
98      <div className="absolute inset-0 overflow-hidden">
99        <div
100          className={cn(
101            "absolute h-[2px] w-full animate-[scan_2s_linear_infinite]",
102            variant === "warning" && "bg-amber-500/50",
103// … truncated