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