Banner 1 - Full-width dismissible announcement bar

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 Banner1Props {
10  title: string;
11  description: string;
12  linkText: string;
13  linkUrl: string;
14  defaultVisible?: boolean;
15  className?: string;
16}
17 
18const Banner1 = ({
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}: Banner1Props) => {
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
36      className={cn("w-full border-b bg-background px-4 py-3", className)}
37    >
38      <div className="flex items-center justify-between gap-2">
39        <div className="flex-1 text-center">
40          <span className="text-sm">
41            <span className="font-medium">{title}</span>{" "}
42            <span className="text-muted-foreground">
43              {description}{" "}
44              <a
45                href={linkUrl}
46                className="underline underline-offset-2 hover:text-foreground"
47                target="_blank"
48              >
49                {linkText}
50              </a>
51              .
52            </span>
53          </span>
54        </div>
55 
56        <Button
57          variant="ghost"
58          size="icon"
59          className="-mr-2 h-8 w-8 flex-none"
60          onClick={handleClose}
61        >
62          <X className="h-4 w-4" />
63        </Button>
64      </div>
65    </section>
66  );
67};
68 
69export { Banner1 };