CookieBanner

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<CookieBanner
  title="We use cookies"
  description="We use essential cookies and optional analytics to improve your experience."
  privacyHref="/privacy"
/>

Legacy mount name: data-component="CookieBanner".

Props and attributes

Slots

This component does not declare a slot.

Events

• click

Source contract

Installed source: components/CookieBanner.wrn

component CookieBanner {
  props {
    class = ""
    title = "We use cookies"
    description = "We use essential cookies and optional analytics to improve your experience."
    privacyHref = "/privacy"
  }
  state visible = true
  view {
        <aside data-show="visible" class="fixed inset-x-4 bottom-4 z-50 max-w-4xl rounded-3xl border border-slate-200 bg-white/95 p-5 shadow-2xl backdrop-blur-xl dark:border-slate-800 dark:bg-slate-900/95 {class}" role="dialog" aria-label="Cookie preferences">
        <div class="flex flex-col gap-5 md:flex-row md:items-center">
        <div class="min-w-0 flex-1">
        <h2 class="font-bold">{title}</h2>
        <p class="mt-1 text-sm text-slate-500">{description} <a href="{privacyHref}" class="text-violet-600 underline">Privacy policy</a>
        </p>
        </div>
        <div class="flex flex-wrap gap-2">
        <button @click="visible = false" class="min-h-11 rounded-xl border border-slate-300 px-4 text-sm font-semibold dark:border-slate-700">Reject optional</button>
        <button @click="visible = false" class="min-h-11 rounded-xl bg-violet-600 px-4 text-sm font-semibold text-white">Accept all</button>
        </div>
        </div>
        </aside>
    }
}