69 lines
2.1 KiB
TypeScript
69 lines
2.1 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
|
import { Box, Typography, Button, Slide } from '@mui/material';
|
|
|
|
export const CookieConsent: React.FC = () => {
|
|
const [open, setOpen] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const consent = localStorage.getItem('mani_candles_cookie_consent');
|
|
if (!consent) {
|
|
// Show consent after a short delay
|
|
const timer = setTimeout(() => setOpen(true), 2000);
|
|
return () => clearTimeout(timer);
|
|
}
|
|
}, []);
|
|
|
|
const handleAccept = () => {
|
|
localStorage.setItem('mani_candles_cookie_consent', 'accepted');
|
|
setOpen(false);
|
|
};
|
|
|
|
return (
|
|
<Slide direction="up" in={open} mountOnEnter unmountOnExit>
|
|
<Box
|
|
sx={{
|
|
position: 'fixed',
|
|
bottom: 24,
|
|
left: 24,
|
|
right: 24,
|
|
maxWidth: { xs: 'calc(100% - 48px)', sm: 480 },
|
|
backgroundColor: 'background.paper',
|
|
border: '1px solid #E6DFD5',
|
|
borderRadius: 3,
|
|
boxShadow: '0 8px 30px rgba(0,0,0,0.08)',
|
|
p: 3,
|
|
zIndex: 2000,
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
gap: 2,
|
|
}}
|
|
>
|
|
<Typography variant="body2" sx={{ color: 'text.secondary', lineHeight: 1.5 }}>
|
|
We use cookies to elevate your sensory browsing experience, analyze site traffic, and optimize our B2B and B2C services. By accepting, you consent to our privacy terms.
|
|
</Typography>
|
|
<Box sx={{ display: 'flex', justifyContent: 'flex-end', gap: 1.5 }}>
|
|
<Button
|
|
size="small"
|
|
variant="text"
|
|
sx={{ color: 'text.secondary', fontSize: '0.75rem', letterSpacing: '0.05em' }}
|
|
onClick={() => setOpen(false)}
|
|
>
|
|
Decline
|
|
</Button>
|
|
<Button
|
|
size="small"
|
|
variant="contained"
|
|
color="primary"
|
|
sx={{ fontSize: '0.75rem', py: 0.8, px: 2 }}
|
|
onClick={handleAccept}
|
|
>
|
|
Accept & Burn
|
|
</Button>
|
|
</Box>
|
|
</Box>
|
|
</Slide>
|
|
);
|
|
};
|
|
|
|
export default CookieConsent;
|