Files
monitoring-app/src/frontend/App.tsx
2026-04-02 11:59:21 +08:00

71 lines
1.6 KiB
TypeScript

import { ColorSchemeScript, MantineProvider, createTheme } from '@mantine/core'
import '@mantine/core/styles.css'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { createRouter, RouterProvider } from '@tanstack/react-router'
import { routeTree } from './routeTree.gen'
const theme = createTheme({
primaryColor: 'brand-blue',
colors: {
'brand-blue': [
'#f0f9ff',
'#e0f2fe',
'#bae6fd',
'#7dd3fc',
'#38bdf8',
'#0ea5e9', // Primary Blue (Sky)
'#0284c7',
'#0369a1',
'#075985',
'#0c4a6e',
],
'brand-purple': [
'#faf5ff',
'#f3e8ff',
'#e9d5ff',
'#d8b4fe',
'#c084fc',
'#a855f7', // Primary Purple
'#9333ea',
'#7e22ce',
'#6b21a8',
'#581c87',
],
},
fontFamily: 'Inter, system-ui, Avenir, Helvetica, Arial, sans-serif',
headings: {
fontFamily: 'Inter, system-ui, sans-serif',
fontWeight: '500', // Softer headings
},
})
const queryClient = new QueryClient({
defaultOptions: {
queries: { staleTime: 30_000, retry: 1 },
},
})
const router = createRouter({
routeTree,
context: { queryClient },
})
declare module '@tanstack/react-router' {
interface Register {
router: typeof router
}
}
export function App() {
return (
<>
<ColorSchemeScript defaultColorScheme="auto" />
<MantineProvider theme={theme} defaultColorScheme="auto">
<QueryClientProvider client={queryClient}>
<RouterProvider router={router} />
</QueryClientProvider>
</MantineProvider>
</>
)
}