All files / src/components/ui/cookieBanner CookieBanner.jsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
11x
 
11x
 
6x
 
6x
6x
 
 
11x
1x
1x
 
 
11x
 
4x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import React, {useEffect, useState} from 'react';
 
 
/**
 * CookieBanner component shows a banner at the bottom of the screen
 * prompting the user to accept cookies if they haven't already given consent.
 *
 * Behavior:
 * - On mount, checks localStorage for 'cookieConsent' key.
 * - If consent not found, shows the banner.
 * - When user clicks "Accept", stores consent in localStorage and hides the banner.
 *
 * @component
 * @module pages/ui/cookieBanner/CookieBanner
 * @returns {JSX.Element|null} The cookie consent banner or null if consent is already given.
 */
export function CookieBanner() {
    const [visible, setVisible] = useState(false);
 
    useEffect(() => {
        // Client-side only check
        Iif (typeof window === 'undefined') return;
 
        const consent = localStorage.getItem('cookieConsent');
        if (!consent) setVisible(true);
    }, []);
 
    const acceptCookies = () => {
        localStorage.setItem('cookieConsent', new Date().toISOString());  // Timestamp
        setVisible(false);
    };
 
    if (!visible) return null;
 
    return (
        <section
            role="banner"
            aria-live="polite"
            aria-label="Cookie consent banner"
            className="fixed bottom-0 left-0 right-0 bg-gray-200 text-gray-900 p-4 flex flex-col md:flex-row justify-between items-center shadow-lg z-50
               dark:bg-gray-900 dark:text-white"
        >
            <p className="mb-2 md:mb-0 max-w-xl">
                Questo sito utilizza cookie per migliorare l’esperienza utente. Continuando, accetti la nostra&nbsp;
                <a href="/privacy" className="underline text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-600">
                    Politica sulla Privacy
                </a>.
            </p>
            <button
                onClick={acceptCookies}
                className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md transition-colors
                 dark:bg-blue-500 dark:hover:bg-blue-600"
            >
                Accetta
            </button>
        </section>
    );
 
}