Banner

1"use client";
2 
3import {
4  ArrowRight,
5  Check,
6  CircleAlert,
7  CircleCheck,
8  Info,
9  OctagonAlert,
10  X,
11} from "lucide-react";
12import { AnimatePresence, motion, useReducedMotion } from "motion/react";
13import {
14  type ReactNode,
15  useCallback,
16  useEffect,
17  useRef,
18  useState,
19} from "react";
20 
21import { cn } from "@/lib/utils";
22 
23const DEFAULT_MORPH_DURATION_MS = 2400;
24 
25/** Bouncy-but-controlled spring driving the bar-to-pill layout morph. */
26const MORPH_SPRING = {
27  type: "spring",
28  stiffness: 320,
29  damping: 30,
30  mass: 0.8,
31} as const;
32 
33/** Ease used for the entrance and dismiss height collapse. */
34const COLLAPSE_TRANSITION = {
35  duration: 0.45,
36  ease: [0.32, 0.72, 0, 1],
37} as const;
38 
39/**
40 * Slow, constant-speed light sweep. The keyframes barely overshoot the
41 * surface, so the band glides across at one steady pace and loops forever
42 * without a fast off-screen catch-up.
43 */
44const SHEEN_KEYFRAMES = ["120% 0%", "-20% 0%"];
45 
46const SHEEN_TRANSITION = {
47  duration: 6,
48  ease: "linear",
49  repeat: Number.POSITIVE_INFINITY,
50} as const;
51 
52export type BannerVariant = "default" | "info" | "success" | "error";
53 
54type VariantStyle = {
55  surface: string;
56  ring: string;
57  action: string;
58  dismiss: string;
59};
60 
61const VARIANT_STYLES: Record<BannerVariant, VariantStyle> = {
62  default: {
63    surface:
64      "border-zinc-800/80 bg-gradient-to-r from-zinc-950 via-zinc-900 to-zinc-950 text-zinc-50 dark:border-zinc-300/70 dark:from-zinc-100 dark:via-white dark:to-zinc-100 dark:text-zinc-950",
65    ring: "border-white/25 text-zinc-100 dark:border-zinc-900/25 dark:text-zinc-900",
66    action:
67      "border-white/40 text-white hover:bg-white/10 dark:border-zinc-900/30 dark:text-zinc-900 dark:hover:bg-zinc-900/[0.06]",
68    dismiss:
69      "text-zinc-400 hover:bg-white/10 hover:text-white dark:text-zinc-500 dark:hover:bg-zinc-900/10 dark:hover:text-zinc-900",
70  },
71  info: {
72    surface:
73      "border-sky-800/60 bg-gradient-to-r from-sky-700 via-sky-600 to-indigo-600 text-white",
74    ring: "border-white/30 text-white",
75    action: "border-white/45 text-white hover:bg-white/15",
76    dismiss: "text-white/70 hover:bg-white/15 hover:text-white",
77  },
78  success: {
79    surface:
80      "border-emerald-800/60 bg-gradient-to-r from-emerald-700 via-emerald-600 to-teal-600 text-white",
81    ring: "border-white/30 text-white",
82    action: "border-white/45 text-white hover:bg-white/15",
83    dismiss: "text-white/70 hover:bg-white/15 hover:text-white",
84  },
85  error: {
86    surface:
87// … truncated