Persisted Dismissible Banner

1"use client"
2 
3import { useEffect, useState } from "react"
4import { Button } from "@/components/ui/button"
5import { IconPlaceholder } from "@/components/icons/icon-placeholder"
6 
7const STORAGE_KEY = "acme-announcement-3-dismissed"
8 
9export default function AnnouncementBlock() {
10  const [mounted, setMounted] = useState(false)
11  const [dismissed, setDismissed] = useState(false)
12 
13  useEffect(() => {
14    const id = requestAnimationFrame(() => {
15      try {
16        if (localStorage.getItem(STORAGE_KEY) === "true") {
17          setDismissed(true)
18        }
19      } catch {}
20      setMounted(true)
21    })
22    return () => cancelAnimationFrame(id)
23  }, [])
24 
25  function handleDismiss() {
26    setDismissed(true)
27    try {
28      localStorage.setItem(STORAGE_KEY, "true")
29    } catch {}
30  }
31 
32  function handleReset() {
33    setDismissed(false)
34    try {
35      localStorage.removeItem(STORAGE_KEY)
36    } catch {}
37  }
38 
39  return (
40    <section className="flex min-h-svh w-full flex-col items-center bg-muted/30 px-6 py-16 text-foreground">
41      <div className="w-full max-w-5xl">
42        {mounted && !dismissed && (
43          <div className="flex w-full items-center gap-3 rounded-lg border border-border bg-primary px-4 py-2.5 text-sm text-primary-foreground shadow-sm">
44            <IconPlaceholder
45              lucide="Rocket"
46              tabler="IconRocket"
47              hugeicons="RocketIcon"
48              phosphor="Rocket"
49              remixicon="RiRocket2Line"
50              className="hidden size-4 shrink-0 sm:block"
51              aria-hidden="true"
52            />
53            <p className="min-w-0 flex-1 truncate font-medium">
54              <span className="font-semibold">Acme Cloud is live.</span>{" "}
55              <span className="text-primary-foreground/80">
56                Deploy in seconds with zero config.
57              </span>{" "}
58              <Button
59                variant="link"
60                size="sm"
61                render={<a href="#" />}
62                nativeButton={false}
63                className="h-auto p-0 align-baseline text-primary-foreground underline underline-offset-2 hover:text-primary-foreground/80"
64              >
65                Get Started
66              </Button>
67            </p>
68            <Button
69              variant="ghost"
70              size="icon-sm"
71              aria-label="Dismiss announcement"
72              onClick={handleDismiss}
73              className="-mr-1 shrink-0 hover:bg-primary-foreground/10 hover:text-primary-foreground"
74// … truncated