layout.tsx

"use client"

import { Container, CssBaseline, ThemeProvider } from "@mui/material"
import { createContext, useState } from "react"
import { QueryClient, QueryClientProvider } from "react-query"
import Header from "../components/Header"
import { Theme } from "./theme"

// metadata for the website
export const metadata = {
  title: 'GameUnity',
  description: 'Soon',
}

// for dark mode global context
export const ColorModeContext = createContext({ toggleColorMode: () => { } });

// this is the root layout for all pages ({children})
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  const [queryClient] = useState(() => new QueryClient());

  const [theme, colorMode] = Theme();

  return (
    <html lang="en">
      <QueryClientProvider client={queryClient}>
        <ColorModeContext.Provider value={colorMode}>
          <ThemeProvider theme={theme}>
            <CssBaseline />
            <body>
              <Container maxWidth={false}>
                <Header />
                {children}
              </Container>
            </body>
          </ThemeProvider>
        </ColorModeContext.Provider>
      </QueryClientProvider>
    </html>
  )
}

// custom super small breakpoint for responsive design
declare module '@mui/material/styles' {
  interface BreakpointOverrides {
    ss: true;
  }
}