feat: add CustomCookieBanner with matching Karcher square checkboxes and styling
This commit is contained in:
@@ -0,0 +1,159 @@
|
||||
'use client'
|
||||
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import { Cookie, Check, ArrowRight } from 'lucide-react'
|
||||
import { useConsentContext } from '@intecion/ipal-kit/client'
|
||||
|
||||
const CONSENT_CATEGORIES = ['necessary', 'analytics', 'marketing'] as const
|
||||
type ConsentCat = (typeof CONSENT_CATEGORIES)[number]
|
||||
|
||||
export function CustomCookieBanner() {
|
||||
const { acceptAll, decided, rejectAll, savePreferences, state, texts } = useConsentContext()
|
||||
const [showSettings, setShowSettings] = useState(false)
|
||||
const [choices, setChoices] = useState(state)
|
||||
|
||||
useEffect(() => {
|
||||
setChoices(state)
|
||||
}, [state])
|
||||
|
||||
if (decided) {
|
||||
return null
|
||||
}
|
||||
|
||||
const toggle = (cat: ConsentCat) => {
|
||||
if (cat === 'necessary') return
|
||||
setChoices((prev) => ({
|
||||
...prev,
|
||||
[cat]: !prev[cat],
|
||||
}))
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
role="dialog"
|
||||
aria-label="Cookie consent"
|
||||
className="fixed bottom-0 inset-x-0 z-50 bg-[#1f1f1f] text-white p-6 border-t-4 border-[#FFED00] shadow-2xl"
|
||||
>
|
||||
<div className="container mx-auto max-w-4xl">
|
||||
{!showSettings ? (
|
||||
<div className="flex flex-col lg:flex-row lg:items-center justify-between gap-6">
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="p-2 bg-[#FFED00] text-[#1f1f1f] shrink-0 border border-[#1f1f1f]">
|
||||
<Cookie className="h-6 w-6" />
|
||||
</div>
|
||||
<div className="text-xs sm:text-sm text-[#e0e0e0] leading-relaxed">
|
||||
<p>
|
||||
{texts.message}{' '}
|
||||
{texts.privacyLink && (
|
||||
<a
|
||||
href={texts.privacyLink.href}
|
||||
className="text-[#FFED00] underline hover:no-underline font-bold"
|
||||
>
|
||||
{texts.privacyLink.label}
|
||||
</a>
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap items-center gap-3 shrink-0">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowSettings(true)}
|
||||
className="bg-[#2b2b2b] hover:bg-[#383838] text-white border border-[#444444] px-4 py-2.5 text-xs font-bold uppercase tracking-wider transition-colors cursor-pointer"
|
||||
>
|
||||
{texts.buttons.settings}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={rejectAll}
|
||||
className="bg-[#2b2b2b] hover:bg-[#383838] text-white border border-[#444444] px-4 py-2.5 text-xs font-bold uppercase tracking-wider transition-colors cursor-pointer"
|
||||
>
|
||||
{texts.buttons.reject}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={acceptAll}
|
||||
className="bg-[#FFED00] hover:bg-[#fae100] text-[#1f1f1f] border-2 border-[#1f1f1f] px-6 py-2.5 text-xs font-black uppercase tracking-widest transition-all cursor-pointer shadow-xs"
|
||||
>
|
||||
{texts.buttons.acceptAll}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center gap-3 border-b border-[#333333] pb-4">
|
||||
<div className="p-1.5 bg-[#FFED00] text-[#1f1f1f]">
|
||||
<Cookie className="h-5 w-5" />
|
||||
</div>
|
||||
<h2 className="text-base font-black uppercase tracking-wider text-white">
|
||||
{texts.settingsTitle}
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<ul className="space-y-4">
|
||||
{CONSENT_CATEGORIES.map((cat) => {
|
||||
const isChecked = cat === 'necessary' ? true : !!choices[cat]
|
||||
const isDisabled = cat === 'necessary'
|
||||
const catData = texts.categories[cat]
|
||||
|
||||
if (!catData) return null
|
||||
|
||||
return (
|
||||
<li
|
||||
key={cat}
|
||||
onClick={() => !isDisabled && toggle(cat)}
|
||||
className={`flex items-start justify-between gap-4 p-4 border border-[#333333] bg-[#262626] ${
|
||||
!isDisabled ? 'cursor-pointer hover:border-[#FFED00]' : 'opacity-90'
|
||||
} transition-colors`}
|
||||
>
|
||||
<div className="pr-4">
|
||||
<div className="text-xs font-black uppercase tracking-wider text-[#FFED00]">
|
||||
{catData.title}
|
||||
</div>
|
||||
<p className="text-xs text-[#a0a0a0] mt-1 leading-relaxed">
|
||||
{catData.description}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Custom Kärcher Checkbox */}
|
||||
<div className="relative flex items-center justify-center mt-0.5 shrink-0">
|
||||
<div
|
||||
className={`w-5 h-5 border-2 border-[#1f1f1f] transition-all flex items-center justify-center ${
|
||||
isChecked ? 'bg-[#FFED00]' : 'bg-white'
|
||||
}`}
|
||||
>
|
||||
<Check
|
||||
className={`w-3.5 h-3.5 text-[#1f1f1f] stroke-[3] transition-opacity ${
|
||||
isChecked ? 'opacity-100' : 'opacity-0'
|
||||
}`}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
)
|
||||
})}
|
||||
</ul>
|
||||
|
||||
<div className="flex justify-end gap-3 pt-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowSettings(false)}
|
||||
className="bg-[#2b2b2b] hover:bg-[#383838] text-white border border-[#444444] px-5 py-2.5 text-xs font-bold uppercase tracking-wider transition-colors cursor-pointer"
|
||||
>
|
||||
{texts.buttons.back}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => savePreferences(choices)}
|
||||
className="bg-[#FFED00] hover:bg-[#fae100] text-[#1f1f1f] border-2 border-[#1f1f1f] px-6 py-2.5 text-xs font-black uppercase tracking-widest transition-all cursor-pointer shadow-xs"
|
||||
>
|
||||
{texts.buttons.save}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user