Banner 10 – Inline announcement link

1"use client";
2 
3import { useState } from "react";
4 
5import { IconPlaceholder } from "@/registry/icons/icon-placeholder";
6import { Button } from "@/components/ui/button";
7 
8export function Banner10() {
9  const [isVisible, setIsVisible] = useState(true);
10 
11  if (!isVisible) return null;
12 
13  return (
14    // To make the banner fixed, add classes like `fixed top-0 inset-x-0 z-50` to the container element
15    <aside
16      role="banner"
17      aria-label="Promotional banner"
18      className="w-full bg-muted py-4 text-muted-foreground"
19    >
20      {/* Banner Container */}
21      <div className="mx-auto max-w-7xl px-8">
22        <div className="flex flex-row items-start justify-between gap-9 lg:items-center">
23          {/* Banner Content */}
24          <div className="flex flex-1 items-start gap-1">
25            <IconPlaceholder
26              lucide="AlertCircle"
27              tabler="IconAlertCircle"
28              hugeicons="Alert02Icon"
29              phosphor="WarningCircleIcon"
30              remixicon="RiErrorWarningLine"
31              className="mt-1 size-4 shrink-0"
32            />
33 
34            <p className="text-base text-pretty">
35              <span className="font-semibold">New from Acme Inc: </span>
36              AI Productivity Suite.{" "}
37              <a href="#" className="underline">
38                Check it out
39              </a>
40            </p>
41          </div>
42 
43          {/* Close Button */}
44          <Button
45            size="icon-sm"
46            className="size-6 shrink-0 max-lg:-mt-1 max-lg:-mr-1"
47            variant="ghost"
48            onClick={() => setIsVisible(false)}
49            aria-label="Close banner"
50          >
51            <IconPlaceholder
52              lucide="X"
53              tabler="IconX"
54              hugeicons="Cancel01Icon"
55              phosphor="XIcon"
56              remixicon="RiCloseLine"
57            />
58          </Button>
59        </div>
60      </div>
61    </aside>
62  );
63}