Add a gamified banner component with animated flair and progress

cgen-ad4ee198cfc84c74a84e2619c1fad5b1

client/components/GamifiedBanner.tsx

@@ -0,0 +1,124 @@
+import { useEffect, useMemo, useState } from "react";
+import { cn } from "@/lib/utils";
+import { Sparkles, Trophy, Gamepad2 } from "lucide-react";
+
+type Props = {
+  text: string;
+  enabled?: boolean;
+  style?: string | null;
+};
+
+const ACCENTS: Record<string, {
+  grad: string;
+  glowRing: string;
+  pill: string;
+  icon: any;
+}> = {
+  quest: {
+    grad: "from-emerald-500/20 via-aethex-500/15 to-neon-blue/20",
+    glowRing:
+      "ring-1 ring-emerald-400/30 shadow-[0_0_30px_rgba(16,185,129,0.25)]",
+    pill: "bg-emerald-500/15 text-emerald-200 border-emerald-400/30",
+    icon: Trophy,
+  },
+  info: {
+    grad: "from-aethex-500/20 via-aethex-400/15 to-sky-500/20",
+    glowRing:
+      "ring-1 ring-aethex-400/30 shadow-[0_0_30px_rgba(99,102,241,0.25)]",
+    pill: "bg-aethex-500/15 text-aethex-200 border-aethex-400/30",
+    icon: Sparkles,
+  },
+  arcade: {
+    grad: "from-fuchsia-500/20 via-purple-500/15 to-indigo-500/20",
+    glowRing:
+      "ring-1 ring-fuchsia-400/30 shadow-[0_0_30px_rgba(217,70,239,0.25)]",
+    pill: "bg-fuchsia-500/15 text-fuchsia-200 border-fuchsia-400/30",
+    icon: Gamepad2,
+  },
+  alert: {
+    grad: "from-amber-500/20 via-orange-500/15 to-rose-500/20",
+    glowRing:
+      "ring-1 ring-amber-400/30 shadow-[0_0_30px_rgba(245,158,11,0.25)]",
+    pill: "bg-amber-500/15 text-amber-100 border-amber-400/30",
+    icon: Sparkles,
+  },
+};
+
+export function GamifiedBanner({ text, enabled, style }: Props) {
+  const accentKey = (style || "quest").toLowerCase();
+  const accent = ACCENTS[accentKey] || ACCENTS.quest;
+  const Icon = accent.icon;
+
+  // Simple entrance progress for "charging" bar
+  const [progress, setProgress] = useState(0);
+  useEffect(() => {
+    const t = setTimeout(() => setProgress(100), 80);
+    return () => clearTimeout(t);
+  }, []);
+
+  const parts = useMemo(() => {
+    // If user prefixed an emoji, use it
+    const m = /^([\p{Emoji}\p{Extended_Pictographic}]+)\s*(.*)$/u.exec(text || "");
+    return {
+      emoji: m?.[1] || "🎮",
+      body: (m?.[2] || text || "").trim(),
+    };
+  }, [text]);
+
+  if (enabled === false) return null;
+
+  return (
+    <div className="relative z-20 w-full border-b border-border/30 overflow-hidden">
+      {/* Ambient gradient */}
+      <div className={cn("absolute inset-0 bg-gradient-to-r", accent.grad)} />
+
+      {/* Floating particles */}
+      <div className="pointer-events-none absolute inset-0 opacity-30">
+        {[...Array(16)].map((_, i) => (
+          <div
+            key={i}
+            className="absolute text-emerald-300/70 animate-float"
+            style={{
+              left: `${Math.random() * 100}%`,
+              top: `${Math.random() * 100}%`,
+              fontSize: `${8 + Math.random() * 8}px`,
+              animationDelay: `${Math.random() * 3}s`,
+              animationDuration: `${3 + Math.random() * 3}s`,
+            }}
+          >
+            {"◆●▲■".charAt(Math.floor(Math.random() * 4))}
+          </div>
+        ))}
+      </div>
+
+      <div className={cn("relative container mx-auto px-4 py-2")}>
+        {/* Content pill */}
+        <div
+          className={cn(
+            "mx-auto inline-flex items-center gap-2 rounded-full border px-3 py-1 backdrop-blur-sm",
+            accent.pill,
+            accent.glowRing,
+          )}
+        >
+          <Icon className="h-4 w-4" />
+          <span className="text-xs font-semibold tracking-wide">
+            {parts.emoji} {parts.body}
+          </span>
+          <span className="ml-1 animate-pulse">•</span>
+        </div>
+
+        {/* Charge bar */}
+        <div className="mt-2 mx-auto h-1 w-full max-w-xl rounded-full bg-white/10 overflow-hidden">
+          <div
+            className={cn(
+              "h-full rounded-full bg-gradient-to-r from-emerald-400 via-aethex-400 to-neon-blue transition-all duration-[1200ms]",
+            )}
+            style={{ width: `${progress}%` }}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default GamifiedBanner;