layout.tsx

"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;
  }
}