98 lines
3.3 KiB
TypeScript
98 lines
3.3 KiB
TypeScript
import React, {useEffect, useState} from "react";
|
|
import CookieConsent from "react-cookie-consent";
|
|
import Link from "next/link";
|
|
|
|
const CookieConsentBanner = ({onConsentChange}: { onConsentChange: (consent: string) => void }) => {
|
|
const [isVisible, setIsVisible] = useState(false);
|
|
const [isFadingIn, setIsFadingIn] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const consent = localStorage.getItem("CookieConsent");
|
|
if (!consent) {
|
|
setIsVisible(true);
|
|
setTimeout(() => setIsFadingIn(true), 10); // Delay to trigger CSS transition
|
|
}
|
|
}, []);
|
|
|
|
const handleAccept = () => {
|
|
setIsFadingIn(false);
|
|
setTimeout(() => {
|
|
localStorage.setItem("CookieConsent", "accepted");
|
|
setIsVisible(false);
|
|
onConsentChange("accepted");
|
|
}, 500); // Match the duration of the fade-out transition
|
|
};
|
|
|
|
const handleDecline = () => {
|
|
setIsFadingIn(false);
|
|
setTimeout(() => {
|
|
localStorage.setItem("CookieConsent", "declined");
|
|
setIsVisible(false);
|
|
onConsentChange("declined");
|
|
}, 500); // Match the duration of the fade-out transition
|
|
};
|
|
|
|
if (!isVisible) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<CookieConsent
|
|
location="bottom"
|
|
buttonText="Accept All"
|
|
declineButtonText="Decline"
|
|
enableDeclineButton
|
|
cookieName="CookieConsent"
|
|
containerClasses={`${isFadingIn ? 'fade-in' : 'fade-out'}`}
|
|
style={{
|
|
background: "rgba(211,211,211,0.44)",
|
|
color: "#333",
|
|
boxShadow: "0 4px 8px rgba(0, 0, 0, 0.1)",
|
|
padding: "1rem",
|
|
borderRadius: "8px",
|
|
backdropFilter: "blur(10px)",
|
|
margin: "2rem",
|
|
width: "calc(100% - 4rem)",
|
|
display: "flex",
|
|
justifyContent: "space-between",
|
|
alignItems: "center",
|
|
textAlign: "left",
|
|
transition: "opacity 0.5s ease",
|
|
opacity: isFadingIn ? 1 : 0,
|
|
}}
|
|
buttonWrapperClasses="button-wrapper"
|
|
buttonStyle={{
|
|
backgroundColor: "#4CAF50",
|
|
color: "#FFF",
|
|
fontSize: "14px",
|
|
borderRadius: "4px",
|
|
padding: "0.5rem 1rem",
|
|
margin: "0.5rem",
|
|
width: "100%",
|
|
maxWidth: "200px",
|
|
}}
|
|
declineButtonStyle={{
|
|
backgroundColor: "#f44336",
|
|
color: "#FFF",
|
|
fontSize: "14px",
|
|
borderRadius: "4px",
|
|
padding: "0.5rem 1rem",
|
|
margin: "0.5rem",
|
|
width: "100%",
|
|
maxWidth: "200px",
|
|
}}
|
|
expires={90}
|
|
onAccept={handleAccept}
|
|
onDecline={handleDecline}
|
|
>
|
|
<div className="content-wrapper text-xl">
|
|
This website uses cookies to enhance your experience. By using our website, you consent to the use of
|
|
cookies.
|
|
You can read more in our <Link href="/" className="text-blue-800 transition-underline">privacy
|
|
policy</Link>.
|
|
</div>
|
|
</CookieConsent>
|
|
);
|
|
};
|
|
|
|
export default CookieConsentBanner; |