michal.cukrowski/thermcool
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: update blog posts and improve cookie consent management

Browse Source
This commit is contained in:
AI Assistant
2026-07-19 01:30:35 +02:00
parent c23f5a3f4b
commit 9f1ef4ec6c
8 changed files with 1114 additions and 223 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/CookieBanner.tsx
+185
View File
@@ -0,0 +1,185 @@
'use client';
import { useState, useEffect } from 'react';
import Link from 'next/link';
import { useConsentStore } from '@/lib/consent-store';
interface CookiePreferences {
necessary: boolean;
analytics: boolean;
marketing: boolean;
advertising: boolean;
}
export default function CookieBanner() {
const {
isInitialized,
isOpen,
analytics,
marketing,
advertising,
setConsent,
acceptAll: storeAcceptAll,
rejectOptional: storeRejectOptional
} = useConsentStore();
const [showDetails, setShowDetails] = useState(false);
const [prefs, setPrefs] = useState<CookiePreferences>({
necessary: true,
analytics: true,
marketing: true,
advertising: true,
});
useEffect(() => {
useConsentStore.getState().initialize();
}, []);
useEffect(() => {
if (isOpen) {
setPrefs({
necessary: true,
analytics: analytics,
marketing: marketing,
advertising: advertising,
});
setShowDetails(false);
}
}, [isOpen, analytics, marketing, advertising]);
const saveSelected = () => {
setConsent(prefs.analytics, prefs.marketing, prefs.advertising);
};
if (!isInitialized || !isOpen) return null;
return (
<div className="fixed bottom-0 left-0 right-0 z-[100] p-4 sm:p-6">
<div className="max-w-4xl mx-auto bg-white rounded-2xl shadow-2xl border border-border overflow-hidden">
{/* Główny pasek */}
<div className="p-5 sm:p-6">
<div className="flex items-start gap-3 mb-4">
<span className="text-2xl shrink-0">🍪</span>
<div>
<h2 className="text-base font-extrabold text-primary font-heading mb-1">
Ta strona używa plików cookie
</h2>
<p className="text-sm text-text-muted leading-relaxed">
Używamy plików cookie, aby zapewnić prawidłowe działanie strony, analizować ruch
i dostosowywać treści. Możesz wybrać które kategorie akceptujesz.{' '}
<Link href="/polityka-prywatnosci" className="text-accent underline hover:no-underline">
Polityka prywatności
</Link>
</p>
</div>
</div>
{/* Szczegóły */}
{showDetails && (
<div className="flex flex-col gap-3 mb-5 p-4 bg-slate-50 rounded-xl">
{/* Niezbędne */}
<div className="flex items-start justify-between gap-4">
<div>
<p className="text-sm font-semibold text-primary">Niezbędne</p>
<p className="text-xs text-text-muted mt-0.5">
Wymagane do prawidłowego działania strony. Nie można wyłączyć.
</p>
</div>
<div className="shrink-0">
<div className="w-11 h-6 bg-accent rounded-full relative cursor-not-allowed opacity-60">
<div className="absolute right-1 top-1 size-4 bg-white rounded-full" />
</div>
</div>
</div>
{/* Analityczne */}
<div className="flex items-start justify-between gap-4 border-t border-border pt-3">
<div>
<p className="text-sm font-semibold text-primary">Analityczne</p>
<p className="text-xs text-text-muted mt-0.5">
Google Analytics — pomagają nam zrozumieć jak użytkownicy korzystają ze strony. Dane są anonimowe.
</p>
</div>
<button
onClick={() => setPrefs(p => ({ ...p, analytics: !p.analytics }))}
className="shrink-0"
>
<div className={`w-11 h-6 rounded-full relative transition-colors ${prefs.analytics ? 'bg-accent' : 'bg-slate-300'}`}>
<div className={`absolute top-1 size-4 bg-white rounded-full transition-all ${prefs.analytics ? 'right-1' : 'left-1'}`} />
</div>
</button>
</div>
{/* Marketingowe */}
<div className="flex items-start justify-between gap-4 border-t border-border pt-3">
<div>
<p className="text-sm font-semibold text-primary">Marketingowe</p>
<p className="text-xs text-text-muted mt-0.5">
Google Ads, Facebook Ads — pozwalają mierzyć skuteczność kampanii i docierać do odpowiednich odbiorców.
</p>
</div>
<button
onClick={() => setPrefs(p => ({ ...p, marketing: !p.marketing }))}
className="shrink-0"
>
<div className={`w-11 h-6 rounded-full relative transition-colors ${prefs.marketing ? 'bg-accent' : 'bg-slate-300'}`}>
<div className={`absolute top-1 size-4 bg-white rounded-full transition-all ${prefs.marketing ? 'right-1' : 'left-1'}`} />
</div>
</button>
</div>
{/* Reklamowe */}
<div className="flex items-start justify-between gap-4 border-t border-border pt-3">
<div>
<p className="text-sm font-semibold text-primary">Reklamowe</p>
<p className="text-xs text-text-muted mt-0.5">
Meta Pixel, Google Ads — umożliwiają wyświetlanie spersonalizowanych reklam na platformach takich jak Facebook, Instagram i Google.
</p>
</div>
<button
onClick={() => setPrefs(p => ({ ...p, advertising: !p.advertising }))}
className="shrink-0"
>
<div className={`w-11 h-6 rounded-full relative transition-colors ${prefs.advertising ? 'bg-accent' : 'bg-slate-300'}`}>
<div className={`absolute top-1 size-4 bg-white rounded-full transition-all ${prefs.advertising ? 'right-1' : 'left-1'}`} />
</div>
</button>
</div>
</div>
)}
{/* Przyciski */}
<div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-2">
<button
onClick={storeAcceptAll}
className="flex-1 sm:flex-none px-5 py-2.5 bg-accent text-white font-bold rounded-xl text-sm hover:bg-accent/90 transition-colors"
>
Akceptuj wszystkie
</button>
<button
onClick={storeRejectOptional}
className="flex-1 sm:flex-none px-5 py-2.5 bg-slate-100 text-primary font-bold rounded-xl text-sm hover:bg-slate-200 transition-colors"
>
Odrzuć opcjonalne
</button>
{showDetails ? (
<button
onClick={saveSelected}
className="flex-1 sm:flex-none px-5 py-2.5 bg-white border border-border text-primary font-bold rounded-xl text-sm hover:border-accent transition-colors"
>
Zapisz wybór
</button>
) : (
<button
onClick={() => setShowDetails(true)}
className="flex-1 sm:flex-none px-5 py-2.5 bg-white border border-border text-primary font-bold rounded-xl text-sm hover:border-accent transition-colors"
>
Dostosuj ustawienia
</button>
)}
</div>
</div>
</div>
</div>
);
}