77 lines
2.9 KiB
TypeScript
77 lines
2.9 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect } from "react";
|
|
import Link from "next/link";
|
|
import { Cookie, X } from "lucide-react";
|
|
|
|
|
|
export function CookieBanner() {
|
|
const [showBanner, setShowBanner] = useState(false);
|
|
|
|
useEffect(() => {
|
|
// Check if the user has already accepted cookies
|
|
const consent = localStorage.getItem("airproject_cookie_consent");
|
|
if (!consent) {
|
|
setShowBanner(true);
|
|
}
|
|
}, []);
|
|
|
|
const acceptCookies = () => {
|
|
localStorage.setItem("airproject_cookie_consent", "true");
|
|
setShowBanner(false);
|
|
};
|
|
|
|
if (!showBanner) return null;
|
|
|
|
return (
|
|
<div className="fixed bottom-0 left-0 right-0 z-50 p-4 md:p-6 pb-safe">
|
|
<div className="max-w-4xl mx-auto bg-slate-900 border border-slate-700 shadow-2xl rounded-2xl p-4 md:p-6 flex flex-col md:flex-row items-start md:items-center justify-between gap-4 md:gap-6 animate-in slide-in-from-bottom-10 fade-in duration-500">
|
|
<div className="flex items-start gap-4">
|
|
<div className="bg-primary/20 p-2 md:p-3 rounded-full shrink-0 mt-1 md:mt-0 text-primary">
|
|
<Cookie className="w-5 h-5 md:w-6 md:h-6" />
|
|
</div>
|
|
<div>
|
|
<h3 className="text-white font-semibold text-sm md:text-base mb-1">
|
|
Dbamy o Twoją prywatność
|
|
</h3>
|
|
<p className="text-slate-400 text-xs md:text-sm leading-relaxed max-w-2xl">
|
|
Nasz serwis używa plików cookies (ciasteczek) w celach statystycznych (m.in. Google Analytics, Google Tag Manager) oraz prawidłowego działania strony.
|
|
Możesz określić warunki przechowywania cookies w swojej przeglądarce. Dowiedz się więcej w naszej{" "}
|
|
<Link
|
|
href="/polityka-prywatnosci"
|
|
className="text-primary hover:text-white transition-colors underline underline-offset-2"
|
|
>
|
|
Polityce Prywatności
|
|
</Link>.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-3 w-full md:w-auto shrink-0 justify-end md:justify-start">
|
|
<button
|
|
onClick={() => setShowBanner(false)}
|
|
className="md:hidden btn btn-ghost btn-circle text-slate-400 hover:text-white shrink-0"
|
|
>
|
|
<X className="w-5 h-5" />
|
|
</button>
|
|
<button
|
|
onClick={acceptCookies}
|
|
className="btn btn-primary text-white w-full md:w-auto shadow-md shadow-primary/20"
|
|
>
|
|
Rozumiem i Akceptuję
|
|
</button>
|
|
</div>
|
|
|
|
{/* Zamknięcie na desktop */}
|
|
<button
|
|
onClick={() => setShowBanner(false)}
|
|
className="hidden md:flex absolute top-4 right-4 text-slate-500 hover:text-white transition-colors p-1"
|
|
aria-label="Zamknij"
|
|
>
|
|
<X className="w-4 h-4" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|