Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 | 5x 5x 5x 5x 5x 5x 5x 4x 1x 3x 5x 5x 5x 5x 5x 1x 1x | import { SnackbarProvider } from 'notistack';
import { useEffect } from 'react';
import { ThemeProvider } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';
import useMediaQuery from '@mui/material/useMediaQuery';
import { I18nextProvider, Trans, useTranslation } from 'react-i18next';
import i18n from './i18n';
import App from './App';
import { getAppTheme } from './theme';
import { useThemeStore } from './stores/useThemeStore';
import { useLanguageStore } from './stores/useLanguageStore';
import CookieConsent from 'react-cookie-consent';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
export function Root() {
// Detection of the user's preferred color scheme
const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
// Zustand store for theme management
const mode = useThemeStore((s) => s.mode);
const setLight = useThemeStore((s) => s.setLight);
const setDark = useThemeStore((s) => s.setDark);
const toggleMode = useThemeStore((s) => s.toggle);
// Update the Zustand store based on the user's preference
useEffect(() => {
if (localStorage.getItem('theme-mode') != null) return;
if (prefersDarkMode) {
setDark();
} else {
setLight();
}
}, []);
// Detection of the user's language
const lang = useLanguageStore(state => state.lang);
useEffect(() => {
i18n.changeLanguage(lang);
}, [lang]);
const { t } = useTranslation();
return (
<SnackbarProvider
maxSnack={3}
autoHideDuration={3000}
preventDuplicate
anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
>
<I18nextProvider i18n={i18n}>
<ThemeProvider theme={getAppTheme(mode)}>
<CssBaseline />
<CookieConsent
location="bottom"
buttonText={t('cookieBanner.accept')}
declineButtonText={t('cookieBanner.decline')}
enableDeclineButton
cookieName="jo2024_cookie_consent"
style={{
position: 'fixed',
bottom: 0,
width: '100%',
background: 'rgba(0,0,0,0.8)',
color: '#fff',
zIndex: 2000,
}}
buttonStyle={{
background: '#009739',
borderRadius: '10px',
color: '#fff',
fontWeight: 'bold',
textTransform: 'uppercase',
}}
declineButtonStyle={{
background: '#E31937',
color: '#fff',
borderRadius: '10px',
fontWeight: 'bold',
textTransform: 'uppercase',
}}
onAccept={() => {
console.log('Cookies acceptés');
}}
onDecline={() => {
console.log('Cookies refusés');
}}
>
<Trans
i18nKey="cookieBanner.message"
components={{
privacyLink: (
<a
href="/privacy-policy"
style={{ color: '#68B9B5', textDecoration: 'underline' }}
/>
),
}}
/>
</CookieConsent>
<LocalizationProvider
dateAdapter={AdapterDayjs}
adapterLocale={i18n.language}
>
<App mode={mode} toggleMode={toggleMode} />
</LocalizationProvider>
</ThemeProvider>
</I18nextProvider>
</SnackbarProvider>
);
} |