117 lines
3.6 KiB
TypeScript
117 lines
3.6 KiB
TypeScript
import '../css/app.css';
|
|
import axios from 'axios';
|
|
import { createInertiaApp } from '@inertiajs/react';
|
|
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
|
|
import { StrictMode, useEffect, useState } from 'react';
|
|
import { createRoot } from 'react-dom/client';
|
|
import 'dayjs/locale/en-sg';
|
|
import { initializeTheme } from '@/hooks/use-appearance';
|
|
|
|
axios.defaults.withCredentials = true;
|
|
axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
|
|
const csrfToken = document.head?.querySelector('meta[name="csrf-token"]');
|
|
if (csrfToken instanceof HTMLMetaElement && csrfToken.content) {
|
|
axios.defaults.headers.common['X-CSRF-TOKEN'] = csrfToken.content;
|
|
}
|
|
|
|
// Mantine imports
|
|
import {
|
|
MantineProvider,
|
|
ColorSchemeProvider,
|
|
type ColorScheme,
|
|
} from '@mantine/core';
|
|
import { Notifications } from '@mantine/notifications';
|
|
import { ModalsProvider } from '@mantine/modals';
|
|
|
|
const appName = import.meta.env.VITE_APP_NAME || 'Laravel';
|
|
|
|
if (typeof window !== 'undefined') {
|
|
initializeTheme();
|
|
}
|
|
|
|
const getInitialScheme = (): ColorScheme => {
|
|
if (typeof window === 'undefined') {
|
|
return 'light';
|
|
}
|
|
|
|
const stored = window.localStorage.getItem('appearance');
|
|
if (stored === 'dark' || stored === 'light') {
|
|
return stored;
|
|
}
|
|
|
|
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
|
return 'dark';
|
|
}
|
|
|
|
return 'light';
|
|
};
|
|
|
|
const setAppearanceCookie = (value: ColorScheme) => {
|
|
if (typeof window === 'undefined') {
|
|
return;
|
|
}
|
|
|
|
const maxAge = 365 * 24 * 60 * 60; // 1 year
|
|
document.cookie = `appearance=${value};path=/;max-age=${maxAge};SameSite=Lax`;
|
|
};
|
|
|
|
createInertiaApp({
|
|
title: (title) => (title ? `${title} - ${appName}` : appName),
|
|
resolve: (name) =>
|
|
resolvePageComponent(
|
|
`./pages/${name}.tsx`,
|
|
import.meta.glob('./pages/**/*.tsx'),
|
|
),
|
|
setup({ el, App, props }) {
|
|
const root = createRoot(el);
|
|
|
|
function Main() {
|
|
const [colorScheme, setColorScheme] = useState<ColorScheme>(() =>
|
|
getInitialScheme()
|
|
);
|
|
|
|
useEffect(() => {
|
|
try {
|
|
document.documentElement.classList.toggle(
|
|
'dark',
|
|
colorScheme === 'dark'
|
|
);
|
|
document.documentElement.style.colorScheme = colorScheme;
|
|
window.localStorage.setItem('appearance', colorScheme);
|
|
setAppearanceCookie(colorScheme);
|
|
} catch {}
|
|
}, [colorScheme]);
|
|
|
|
const toggleColorScheme = (value?: ColorScheme) =>
|
|
setColorScheme(
|
|
value ?? (colorScheme === 'light' ? 'dark' : 'light')
|
|
);
|
|
|
|
return (
|
|
<StrictMode>
|
|
<ColorSchemeProvider
|
|
colorScheme={colorScheme}
|
|
toggleColorScheme={toggleColorScheme}
|
|
>
|
|
<MantineProvider
|
|
withGlobalStyles
|
|
withNormalizeCSS
|
|
theme={{ colorScheme }}
|
|
>
|
|
<ModalsProvider>
|
|
<Notifications position="bottom-right" />
|
|
<App {...props} />
|
|
</ModalsProvider>
|
|
</MantineProvider>
|
|
</ColorSchemeProvider>
|
|
</StrictMode>
|
|
);
|
|
}
|
|
|
|
root.render(<Main />);
|
|
},
|
|
progress: {
|
|
color: '#4B5563',
|
|
},
|
|
});
|