fix(cookies & seo): refactor cookie settings to centered scrollable modal, add OpenGraph share image SEO metadata, and optimize hero LCP image
This commit is contained in:
@@ -28,80 +28,110 @@ export function CustomCookieBanner() {
|
||||
}))
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
role="dialog"
|
||||
aria-label="Cookie consent"
|
||||
className="fixed bottom-0 inset-x-0 z-50 bg-[#1f1f1f] text-white p-5 sm:p-6 border-t-4 border-[#FFED00] shadow-2xl max-h-[85vh] overflow-y-auto"
|
||||
>
|
||||
<div className="container mx-auto max-w-4xl">
|
||||
{!showSettings ? (
|
||||
<div className="flex flex-col lg:flex-row lg:items-center justify-between gap-5">
|
||||
<div className="flex items-start gap-3.5">
|
||||
<div className="p-2 bg-[#FFED00] text-[#1f1f1f] shrink-0 border border-[#1f1f1f]">
|
||||
<Cookie className="h-5 w-5" />
|
||||
</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>
|
||||
const handleSave = () => {
|
||||
savePreferences(choices)
|
||||
setShowSettings(false)
|
||||
}
|
||||
|
||||
<div className="flex flex-wrap items-center gap-2.5 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>
|
||||
const handleAcceptAll = () => {
|
||||
acceptAll()
|
||||
setShowSettings(false)
|
||||
}
|
||||
|
||||
const handleRejectAll = () => {
|
||||
rejectAll()
|
||||
setShowSettings(false)
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* 1. Compact Bottom Banner */}
|
||||
{!showSettings && (
|
||||
<div
|
||||
role="dialog"
|
||||
aria-label="Cookie consent"
|
||||
className="fixed bottom-0 inset-x-0 z-50 bg-[#1f1f1f] text-white p-4 sm:p-6 border-t-4 border-[#FFED00] shadow-2xl"
|
||||
>
|
||||
<div className="container mx-auto max-w-5xl">
|
||||
<div className="flex flex-col lg:flex-row lg:items-center justify-between gap-5">
|
||||
<div className="flex items-start gap-3.5">
|
||||
<div className="p-2 bg-[#FFED00] text-[#1f1f1f] shrink-0 border border-[#1f1f1f]">
|
||||
<Cookie className="h-5 w-5" />
|
||||
</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-2.5 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={handleRejectAll}
|
||||
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={handleAcceptAll}
|
||||
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>
|
||||
) : (
|
||||
<div className="space-y-5">
|
||||
<div className="flex items-center justify-between border-b border-[#333333] pb-3">
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 2. Modal Window for Cookie Settings (Centered & Scrollable) */}
|
||||
{showSettings && (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 sm:p-6 bg-black/80 backdrop-blur-xs overflow-y-auto">
|
||||
<div
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-label={texts.settingsTitle}
|
||||
className="w-full max-w-2xl bg-[#1f1f1f] text-white p-6 sm:p-8 border-t-4 border-[#FFED00] shadow-2xl my-auto max-h-[90vh] flex flex-col"
|
||||
>
|
||||
{/* Modal Header */}
|
||||
<div className="flex items-center justify-between border-b border-[#333333] pb-4 mb-6 shrink-0">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-1.5 bg-[#FFED00] text-[#1f1f1f]">
|
||||
<Cookie className="h-5 w-5" />
|
||||
</div>
|
||||
<h2 className="text-sm sm:text-base font-black uppercase tracking-wider text-white">
|
||||
<h2 className="text-base sm:text-lg font-black uppercase tracking-wider text-white">
|
||||
{texts.settingsTitle}
|
||||
</h2>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowSettings(false)}
|
||||
className="text-[#a0a0a0] hover:text-white p-1"
|
||||
aria-label="Zamknij ustawienia"
|
||||
className="text-[#a0a0a0] hover:text-white p-1.5 cursor-pointer transition-colors"
|
||||
aria-label="Zamknij"
|
||||
>
|
||||
<X className="h-5 w-5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<ul className="space-y-3">
|
||||
{/* Scrollable Categories List */}
|
||||
<div className="overflow-y-auto flex-1 pr-1 space-y-3.5">
|
||||
{CONSENT_CATEGORIES.map((cat) => {
|
||||
const isChecked = cat === 'necessary' ? true : !!choices[cat]
|
||||
const isDisabled = cat === 'necessary'
|
||||
@@ -110,18 +140,18 @@ export function CustomCookieBanner() {
|
||||
if (!catData) return null
|
||||
|
||||
return (
|
||||
<li
|
||||
<div
|
||||
key={cat}
|
||||
onClick={() => !isDisabled && toggle(cat)}
|
||||
className={`flex items-start justify-between gap-4 p-3.5 border border-[#333333] bg-[#262626] ${
|
||||
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="pr-4 select-none">
|
||||
<div className="text-xs font-black uppercase tracking-wider text-[#FFED00]">
|
||||
{catData.title}
|
||||
</div>
|
||||
<p className="text-xs text-[#a0a0a0] mt-0.5 leading-relaxed">
|
||||
<p className="text-xs text-[#a0a0a0] mt-1 leading-relaxed">
|
||||
{catData.description}
|
||||
</p>
|
||||
</div>
|
||||
@@ -140,12 +170,13 @@ export function CustomCookieBanner() {
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end gap-3 pt-2">
|
||||
{/* Modal Footer Buttons */}
|
||||
<div className="flex flex-wrap items-center justify-end gap-3 pt-6 mt-6 border-t border-[#333333] shrink-0">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowSettings(false)}
|
||||
@@ -155,15 +186,15 @@ export function CustomCookieBanner() {
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => savePreferences(choices)}
|
||||
onClick={handleSave}
|
||||
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>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user