"use client"
import { Container, CssBaseline, ThemeProvider, createTheme, useMediaQuery } from "@mui/material"
import { useMemo, useState } from "react"
import { QueryClient, QueryClientProvider } from "react-query"
export const metadata = {
title: 'GameUnity',
description: 'Soon',
}
// this is the root layout for all pages ({children})
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
const [queryClient] = useState(() => new QueryClient());
const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
const theme = useMemo(
() =>
createTheme({
palette: {
mode: prefersDarkMode ? 'dark' : 'light',
},
breakpoints: {
values: {
xs: 0,
ss: 300,
sm: 600,
md: 900,
lg: 1200,
xl: 1536,
},
},
}),
[prefersDarkMode],
);
return (
<html lang="en">
<QueryClientProvider client={queryClient}>
<ThemeProvider theme={theme}>
<CssBaseline />
<body>
<Container>
{children}
</Container>
</body>
</ThemeProvider>
</QueryClientProvider>
</html>
)
}
// custom super small breakpoint for responsive design
declare module '@mui/material/styles' {
interface BreakpointOverrides {
ss: true;
}
}