118 lines
3.8 KiB
TypeScript
118 lines
3.8 KiB
TypeScript
'use client';
|
|
|
|
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
|
|
import React, { useMemo, useState, useEffect } from 'react';
|
|
import { ThemeProvider, createTheme } from '@mui/material/styles';
|
|
import CssBaseline from '@mui/material/CssBaseline';
|
|
import { useCustomizerStore } from '@/features/dashboard/store/useCustomizerStore';
|
|
import { LicenseInfo } from '@mui/x-license';
|
|
import { AuthInitializer } from '@/features/login/components/AuthInitializer';
|
|
|
|
const PERPETUAL_LICENSE_KEY =
|
|
'e0d9bb8070ce0054c9d9ecb6e82cb58fTz0wLEU9MzI0NzIxNDQwMDAwMDAsUz1wcmVtaXVtLExNPXBlcnBldHVhbCxLVj0y';
|
|
try {
|
|
LicenseInfo.setLicenseKey(PERPETUAL_LICENSE_KEY);
|
|
} catch (error) {
|
|
console.error('Failed to set MUI license key:', error);
|
|
}
|
|
|
|
export default function Providers({
|
|
children,
|
|
}: Readonly<{ children: React.ReactNode }>) {
|
|
const [queryClient] = useState(() => new QueryClient());
|
|
const [mounted, setMounted] = useState(false);
|
|
const activeMode = useCustomizerStore((state) => state.activeMode);
|
|
const isHydrated = useCustomizerStore((state) => state.isHydrated);
|
|
|
|
useEffect(() => {
|
|
setMounted(true);
|
|
}, []);
|
|
|
|
const safeMode = mounted && isHydrated ? activeMode : 'light';
|
|
|
|
const theme = useMemo(
|
|
() =>
|
|
createTheme({
|
|
palette: {
|
|
mode: safeMode,
|
|
primary: {
|
|
main: '#5d87ff',
|
|
light: '#ecf2ff',
|
|
dark: '#4570ea',
|
|
},
|
|
secondary: {
|
|
main: '#49beff',
|
|
light: '#e8f7ff',
|
|
dark: '#23afdb',
|
|
},
|
|
...(safeMode === 'dark'
|
|
? {
|
|
text: {
|
|
primary: '#ffffff',
|
|
secondary: '#b0bcc8',
|
|
},
|
|
background: {
|
|
default: '#0b1426',
|
|
paper: '#111c2e',
|
|
},
|
|
}
|
|
: {
|
|
text: {
|
|
primary: '#1a1a1a',
|
|
secondary: '#4a5568',
|
|
},
|
|
background: {
|
|
default: '#ffffff',
|
|
paper: '#ffffff',
|
|
},
|
|
}),
|
|
},
|
|
typography: {
|
|
fontFamily: '"Plus Jakarta Sans", "Helvetica", "Arial", sans-serif',
|
|
h1: { fontWeight: 600, fontSize: '2.25rem', lineHeight: 1.2 },
|
|
h2: { fontWeight: 600, fontSize: '1.875rem', lineHeight: 1.2 },
|
|
h3: { fontWeight: 600, fontSize: '1.5rem', lineHeight: 1.2 },
|
|
h4: { fontWeight: 600, fontSize: '1.3125rem', lineHeight: 1.2 },
|
|
h5: { fontWeight: 600, fontSize: '1.125rem', lineHeight: 1.2 },
|
|
h6: { fontWeight: 600, fontSize: '1rem', lineHeight: 1.2 },
|
|
button: { textTransform: 'none', fontWeight: 500 },
|
|
body1: { fontSize: '0.8125rem', fontWeight: 400, lineHeight: 1.5 }, // 13px
|
|
body2: { fontSize: '0.75rem', fontWeight: 400, lineHeight: 1.5 }, // 12px
|
|
subtitle1: { fontSize: '0.875rem', fontWeight: 400 },
|
|
subtitle2: { fontSize: '0.75rem', fontWeight: 400 },
|
|
},
|
|
components: {
|
|
MuiCssBaseline: {
|
|
styleOverrides: {
|
|
body: {
|
|
fontFamily:
|
|
"var(--font-plus-jakarta), 'Plus Jakarta Sans', sans-serif",
|
|
},
|
|
},
|
|
},
|
|
MuiTypography: {
|
|
styleOverrides: {
|
|
root: ({ theme }) => ({
|
|
...(theme.palette.mode === 'light' && {
|
|
color: theme.palette.text.primary,
|
|
}),
|
|
}),
|
|
},
|
|
},
|
|
},
|
|
}),
|
|
[safeMode]
|
|
);
|
|
|
|
return (
|
|
<QueryClientProvider client={queryClient}>
|
|
<AuthInitializer>
|
|
<ThemeProvider theme={theme}>
|
|
<CssBaseline />
|
|
{children}
|
|
</ThemeProvider>
|
|
</AuthInitializer>
|
|
</QueryClientProvider>
|
|
);
|
|
}
|