Antoni Nuñez Romeu
68 lines
2.9 KiB
React
68 lines
2.9 KiB
React
import React, { useState } from 'react';
|
|
import { useTranslation } from '../i18n';
|
|
import './CookieBanner.css';
|
|
|
|
function CookieBanner({ onConsent, onPrivacyClick }) {
|
|
const { t } = useTranslation();
|
|
const [categories, setCategories] = useState({
|
|
analytics: false,
|
|
preferences: false,
|
|
health_data: false,
|
|
});
|
|
|
|
function toggleCategory(cat) {
|
|
setCategories(prev => ({ ...prev, [cat]: !prev[cat] }));
|
|
}
|
|
|
|
function handleAcceptAll() {
|
|
onConsent({ essential: true, analytics: true, preferences: true, health_data: true });
|
|
}
|
|
|
|
function handleRejectOptional() {
|
|
onConsent({ essential: true, analytics: false, preferences: false, health_data: false });
|
|
}
|
|
|
|
function handleSave() {
|
|
onConsent({ essential: true, ...categories });
|
|
}
|
|
|
|
return (
|
|
<div className="cookie-banner-overlay">
|
|
<div className="cookie-banner">
|
|
<h2 className="cookie-banner-title">{t('cookie_banner.title')}</h2>
|
|
<p className="cookie-banner-desc">{t('cookie_banner.description')}</p>
|
|
<div className="cookie-categories">
|
|
<div className="cookie-category">
|
|
<div className="cookie-category-info">
|
|
<span className="cookie-category-name">{t('cookie_banner.category.essential')}</span>
|
|
<span className="cookie-category-desc">{t('cookie_banner.category.essential_desc')}</span>
|
|
</div>
|
|
<div className="cookie-toggle cookie-toggle--locked">
|
|
<span className="cookie-toggle-track"><span className="cookie-toggle-thumb" /></span>
|
|
</div>
|
|
</div>
|
|
{['analytics', 'preferences', 'health_data'].map(cat => (
|
|
<div className="cookie-category" key={cat}>
|
|
<div className="cookie-category-info">
|
|
<span className="cookie-category-name">{t(`cookie_banner.category.${cat}`)}</span>
|
|
<span className="cookie-category-desc">{t(`cookie_banner.category.${cat}_desc`)}</span>
|
|
</div>
|
|
<button type="button" className={`cookie-toggle ${categories[cat] ? 'cookie-toggle--on' : ''}`} onClick={() => toggleCategory(cat)} aria-pressed={categories[cat]}>
|
|
<span className="cookie-toggle-track"><span className="cookie-toggle-thumb" /></span>
|
|
</button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<div className="cookie-banner-actions">
|
|
<button type="button" className="cookie-btn cookie-btn--primary" onClick={handleAcceptAll}>{t('cookie_banner.accept_all')}</button>
|
|
<button type="button" className="cookie-btn cookie-btn--secondary" onClick={handleRejectOptional}>{t('cookie_banner.reject_optional')}</button>
|
|
<button type="button" className="cookie-btn cookie-btn--tertiary" onClick={handleSave}>{t('cookie_banner.save')}</button>
|
|
</div>
|
|
<button type="button" className="cookie-more-info" onClick={onPrivacyClick}>{t('cookie_banner.more_info')} →</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default CookieBanner;
|