48 lines
1.5 KiB
TypeScript
48 lines
1.5 KiB
TypeScript
"use client";
|
||
|
||
import { useEffect, useState } from "react";
|
||
|
||
import styles from "@/static/cookie-consent/cookie-consent.module.css";
|
||
|
||
export const COOKIE_CONSENT_KEY = "autli-cookie-consent";
|
||
export const COOKIE_CONSENT_EVENT = "autli-cookie-consent-accepted";
|
||
|
||
const CookieConsent = () => {
|
||
const [visible, setVisible] = useState(false);
|
||
|
||
useEffect(() => {
|
||
const timer = window.setTimeout(() => {
|
||
setVisible(window.localStorage.getItem(COOKIE_CONSENT_KEY) !== "accepted");
|
||
}, 0);
|
||
|
||
return () => window.clearTimeout(timer);
|
||
}, []);
|
||
|
||
const acceptCookies = () => {
|
||
window.localStorage.setItem(COOKIE_CONSENT_KEY, "accepted");
|
||
window.dispatchEvent(new Event(COOKIE_CONSENT_EVENT));
|
||
setVisible(false);
|
||
};
|
||
|
||
if (!visible) return null;
|
||
|
||
return (
|
||
<section className={styles.banner} aria-label="Согласие на использование cookie">
|
||
<div className={styles.content}>
|
||
<div className={styles.text}>
|
||
<p className={styles.title}>Cookie-файлы</p>
|
||
<p className={styles.description}>
|
||
Я использую cookie и Яндекс Метрику, чтобы понимать, как работает
|
||
сайт, и улучшать его для посетителей.
|
||
</p>
|
||
</div>
|
||
|
||
<button type="button" className={styles.button} onClick={acceptCookies}>
|
||
Принять
|
||
</button>
|
||
</div>
|
||
</section>
|
||
);
|
||
};
|
||
|
||
export default CookieConsent;
|