50 lines
1.7 KiB
TypeScript
50 lines
1.7 KiB
TypeScript
import { useEffect, useState } from "react";
|
|
import { getConsent, setConsent, startHeartbeat, type ConsentValue } from "../lib/analytics.js";
|
|
|
|
export function CookieConsent() {
|
|
const [visible, setVisible] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const current = getConsent();
|
|
if (current === null) {
|
|
setVisible(true);
|
|
} else if (current === "accepted") {
|
|
startHeartbeat();
|
|
}
|
|
}, []);
|
|
|
|
function choose(value: ConsentValue) {
|
|
setConsent(value);
|
|
setVisible(false);
|
|
if (value === "accepted") startHeartbeat();
|
|
}
|
|
|
|
if (!visible) return null;
|
|
|
|
return (
|
|
<div className="fixed inset-x-0 bottom-0 z-50 border-t border-white/10 bg-panel/95 backdrop-blur px-4 py-3 sm:px-6">
|
|
<div className="mx-auto flex max-w-4xl flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
|
|
<p className="text-xs text-slate-300 sm:text-sm">
|
|
Este site coleta dados básicos de uso (endereço IP, país aproximado e páginas
|
|
acessadas) apenas para estatísticas anônimas de acesso. Nenhum dado é vendido ou
|
|
compartilhado com terceiros. Você pode recusar sem perder acesso ao atlas.
|
|
</p>
|
|
<div className="flex shrink-0 gap-2">
|
|
<button
|
|
onClick={() => choose("declined")}
|
|
className="rounded px-3 py-1.5 text-xs text-slate-300 hover:bg-white/5 sm:text-sm"
|
|
>
|
|
Recusar
|
|
</button>
|
|
<button
|
|
onClick={() => choose("accepted")}
|
|
className="rounded bg-accent px-3 py-1.5 text-xs font-medium text-white hover:opacity-90 sm:text-sm"
|
|
>
|
|
Aceitar
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|