Banner 2 - Container announcement bar with dismiss

1"use client";
2 
3import { X } from "lucide-react";
4import { useState } from "react";
5 
6import { Button } from "@/components/ui/button";
7import { cn } from "@/lib/utils";
8 
9interface Banner2Props {
10  title: string;
11  description: string;
12  linkText: string;
13  linkUrl: string;
14  defaultVisible?: boolean;
15  className?: string;
16}
17 
18const Banner2 = ({
19  title = "Version 2.0 is now available!",
20  description = "Read the full release notes",
21  linkText = "here",
22  linkUrl = "#",
23  defaultVisible = true,
24  className,
25}: Banner2Props) => {
26  const [isVisible, setIsVisible] = useState(defaultVisible);
27 
28  const handleClose = () => {
29    setIsVisible(false);
30  };
31 
32  if (!isVisible) return null;
33 
34  return (
35    <section className={cn("w-full bg-muted px-4 py-3", className)}>
36      <div className="container">
37        <div className="flex items-center gap-2">
38          <div className="flex-1">
39            <span className="text-sm">
40              <span className="font-medium">{title}</span>{" "}
41              <span className="text-muted-foreground">
42                {description}{" "}
43                <a
44                  href={linkUrl}
45                  className="underline underline-offset-2 hover:text-foreground"
46                  target="_blank"
47                >
48                  {linkText}
49                </a>
50                .
51              </span>
52            </span>
53          </div>
54 
55          <Button
56            variant="ghost"
57            size="icon"
58            className="-mr-2 h-8 w-8 flex-none"
59            onClick={handleClose}
60          >
61            <X className="h-4 w-4" />
62          </Button>
63        </div>
64      </div>
65    </section>
66  );
67};
68 
69export { Banner2 };