Dismissible Bar And Callout

1"use client"
2 
3import { useState } from "react"
4import { Badge } from "@/components/ui/badge"
5import { Button } from "@/components/ui/button"
6import { IconPlaceholder } from "@/components/icons/icon-placeholder"
7 
8export default function AnnouncementBlock() {
9  const [dismissed, setDismissed] = useState(false)
10 
11  return (
12    <section className="flex min-h-svh w-full flex-col items-center justify-center bg-background px-6 py-12 text-foreground">
13      <div className="w-full max-w-2xl">
14        {!dismissed && (
15          <div className="flex w-full items-center justify-between gap-3 rounded-lg border border-border bg-primary px-4 py-2.5 text-primary-foreground">
16            <div className="flex items-center gap-2 text-sm font-medium">
17              <IconPlaceholder
18                lucide="Megaphone"
19                tabler="IconSpeakerphone"
20                hugeicons="MegaphoneIcon"
21                phosphor="Megaphone"
22                remixicon="RiMegaphoneLine"
23                className="size-4 shrink-0"
24                aria-hidden="true"
25              />
26              <span>
27                Acme 3.0 is here: faster, smarter, and redesigned.{" "}
28                <Button
29                  variant="link"
30                  size="sm"
31                  render={<a href="#" />}
32                  nativeButton={false}
33                  className="h-auto p-0 text-primary-foreground underline underline-offset-2 hover:text-primary-foreground/80"
34                >
35                  Read The Announcement
36                  <span className="sr-only"> (opens in same tab)</span>
37                </Button>
38              </span>
39            </div>
40            <Button
41              variant="ghost"
42              size="icon-sm"
43              aria-label="Dismiss announcement"
44              onClick={() => setDismissed(true)}
45              className="shrink-0 hover:bg-primary-foreground/10 hover:text-primary-foreground"
46            >
47              <IconPlaceholder
48                lucide="X"
49                tabler="IconX"
50                hugeicons="Cancel01Icon"
51                phosphor="X"
52                remixicon="RiCloseLine"
53                aria-hidden="true"
54              />
55            </Button>
56          </div>
57        )}
58 
59        <div className="mt-6 rounded-lg border border-border bg-card px-6 py-10 text-center sm:px-10">
60          <Badge variant="secondary">
61            <IconPlaceholder
62              lucide="Sparkles"
63              tabler="IconSparkles"
64// … truncated