banner

1---
2import type { HTMLAttributes } from "astro/types"
3import { cva, type VariantProps } from "class-variance-authority"
4 
5import { cn } from "@/lib/utils"
6 
7type Props = HTMLAttributes<"aside"> &
8  VariantProps<typeof variants> & {
9    storageKey?: string
10  }
11 
12const variants = cva("relative flex items-center py-2", {
13  variants: {
14    variant: {
15      default: "bg-foreground text-background w-full",
16      floating:
17        "bg-background mx-auto my-2 w-[calc(100%-2rem)] max-w-[calc(var(--container,1280px)-2rem)] overflow-hidden rounded-lg border shadow-sm",
18    },
19  },
20  defaultVariants: {
21    variant: "default",
22  },
23})
24 
25const { class: className, variant, storageKey, ...props } = Astro.props
26---
27 
28<aside
29  class={cn(variants({ variant }), className)}
30  data-slot="banner"
31  data-banner-storage-key={storageKey}
32  data-variant={variant}
33  {...props}
34>
35  <slot />
36</aside>
37 
38<script is:inline>
39  const initializedKey = "fulldevBannerInitialized"
40 
41  if (!document.documentElement.dataset[initializedKey]) {
42    document.documentElement.dataset[initializedKey] = "true"
43 
44    const getStorageToken = (key) => `banner:${key}`
45 
46    const syncBanners = () => {
47      document.querySelectorAll("[data-slot='banner']").forEach((banner) => {
48        if (!(banner instanceof HTMLElement)) return
49 
50        const storageKey = banner.dataset.bannerStorageKey
51 
52        if (
53          storageKey &&
54          sessionStorage.getItem(getStorageToken(storageKey)) === "hidden"
55        ) {
56          banner.hidden = true
57        }
58      })
59    }
60 
61    syncBanners()
62 
63    document.addEventListener("click", (event) => {
64      const target = event.target
65 
66      if (!(target instanceof Element)) return
67 
68      const closeButton = target.closest("[data-slot='banner-close']")
69 
70      if (!(closeButton instanceof HTMLElement)) return
71 
72      const banner = closeButton.closest("[data-slot='banner']")
73 
74      if (!(banner instanceof HTMLElement)) return
75 
76      banner.hidden = true
77 
78      const storageKey = banner.dataset.bannerStorageKey
79 
80      if (storageKey) {
81        sessionStorage.setItem(getStorageToken(storageKey), "hidden")
82      }
83    })
84  }
85</script>