Top Banner

1"use client";
2 
3import type React from "react";
4 
5import { Button } from "@/components/ui/button";
6import { cn } from "@/lib/utils";
7import { X } from "lucide-react";
8import { useState, useEffect } from "react";
9import { motion, AnimatePresence } from "motion/react";
10 
11export interface BannerProps {
12  variant?:
13    | "default"
14    | "minimal"
15    | "popup"
16    | "destructive"
17    | "warning"
18    | "success"
19    | "info"
20    | "announcement";
21  title: string;
22  description?: string;
23  buttonText?: string;
24  buttonIcon?: React.ReactNode;
25  buttonLink?: string;
26  dismissable?: boolean;
27  className?: string;
28  autoDismiss?: number; // in ms
29  onDismiss?: () => void;
30  gradientColors?: string[];
31}
32 
33export function Banner({
34  variant = "default",
35  title,
36  description,
37  buttonText,
38  buttonIcon,
39  buttonLink,
40  dismissable = true,
41  className,
42  autoDismiss,
43  onDismiss,
44  gradientColors,
45}: BannerProps) {
46  const [isVisible, setIsVisible] = useState(true);
47 
48  useEffect(() => {
49    if (isVisible && autoDismiss) {
50      const timer = setTimeout(() => handleDismiss(), autoDismiss);
51      return () => clearTimeout(timer);
52    }
53  }, [isVisible, autoDismiss]);
54 
55  const handleDismiss = () => {
56    setIsVisible(false);
57    onDismiss?.();
58  };
59 
60  const getVariantStyles = () => {
61    const hasGradient = gradientColors && gradientColors.length > 0;
62 
63    switch (variant) {
64      case "minimal":
65        return {
66          container: hasGradient
67            ? "sticky top-0 z-50 w-full border-b backdrop-blur supports-[backdrop-filter]:bg-card/60"
68            : "sticky top-0 z-50 w-full border-b bg-card/95 backdrop-blur supports-[backdrop-filter]:bg-card/60",
69          wrapper:
70            "relative container mx-auto flex flex-col sm:flex-row md:items-start items-center justify-center px-3 sm:px-4 py-2 gap-2 sm:gap-4 max-w-2xl",
71          content:
72            "flex flex-col sm:flex-row items-start sm:items-center gap-1 sm:gap-2",
73          title: "text-sm font-medium text-card-foreground leading-tight",
74          description: "text-xs text-muted-foreground sm:ml-2",
75          actions:
76            "flex items-center justify-center md:justify-start gap-2 sm:self-auto",
77        };
78      case "popup":
79        return {
80          container: hasGradient
81            ? "fixed top-4 left-1/2 -translate-x-1/2 z-50 max-w-sm sm:max-w-md w-[90%] sm:w-auto border border-border rounded-lg shadow-lg backdrop-blur"
82// … truncated