32 lines
1.6 KiB
JavaScript
32 lines
1.6 KiB
JavaScript
'use client';
|
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
import { Cookie } from 'lucide-react';
|
|
import { useConsentContext } from './ConsentContext.js';
|
|
/**
|
|
* Floating "cookie settings" button — lets visitors reopen the consent panel
|
|
* after deciding (GDPR: withdrawing consent must be as easy as giving it).
|
|
* Hidden while the banner is showing.
|
|
*
|
|
* Colours follow the same CSS custom properties as CookieBanner
|
|
* (--ipal-surface, --ipal-border, --ipal-hover, --ipal-text), so a client's
|
|
* palette applies to both without touching either component. Pass className to
|
|
* replace the styling outright.
|
|
*/ export function CookieButton({ className } = {}) {
|
|
const { decided, reopen } = useConsentContext();
|
|
if (!decided) {
|
|
return null;
|
|
}
|
|
const cls = className ?? 'fixed bottom-4 left-4 z-40 flex h-11 w-11 items-center justify-center rounded-full border shadow-md transition-colors ' + 'bg-[var(--ipal-surface,#fff)] border-[var(--ipal-border,#e5e5e5)] hover:bg-[var(--ipal-hover,#f5f5f5)] ' + 'dark:bg-[var(--ipal-surface-dark,#171717)] dark:border-[var(--ipal-border-dark,#262626)] dark:hover:bg-[var(--ipal-hover-dark,#262626)]';
|
|
return /*#__PURE__*/ _jsx("button", {
|
|
"aria-label": "Cookie settings",
|
|
className: cls,
|
|
"data-ipal": "cookie-button",
|
|
onClick: reopen,
|
|
children: /*#__PURE__*/ _jsx(Cookie, {
|
|
"aria-hidden": "true",
|
|
className: "h-5 w-5 text-[var(--ipal-text,#525252)] dark:text-[var(--ipal-text-dark,#d4d4d4)]"
|
|
})
|
|
});
|
|
}
|
|
|
|
//# sourceMappingURL=CookieButton.js.map
|