diff --git a/src/App.tsx b/src/App.tsx new file mode 100644 index 0000000..e035158 --- /dev/null +++ b/src/App.tsx @@ -0,0 +1,32 @@ +import { useMemo } from "react"; +import { + ThemeProvider, + createTheme, + useMediaQuery, + CssBaseline, +} from "@material-ui/core"; + +import { RoomContextProvider } from "./context"; + +export const App = () => { + const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)"); + + const theme = useMemo( + () => + createTheme({ + palette: { + type: prefersDarkMode ? "dark" : "light", + }, + }), + [prefersDarkMode] + ); + + return ( + + + + Here goes content soon! + + + ); +}; diff --git a/src/context.tsx b/src/context.tsx new file mode 100644 index 0000000..2d3ecef --- /dev/null +++ b/src/context.tsx @@ -0,0 +1,23 @@ +import { createContext, FC, useContext, useState } from "react"; +import { ContextData, ContextValue } from "./types"; + +const defaultState: ContextData = { x: 0 }; + +const Context = createContext(undefined); + +export const RoomContextProvider: FC = ({ children }) => { + const [state, setState] = useState(defaultState); + + return ( + {children} + ); +}; + +export const useRoomContext = () => { + const context = useContext(Context); + + if (!context) + throw new Error("useRoomContext must be used within RoomContextProvider"); + + return context; +}; diff --git a/src/index.tsx b/src/index.tsx new file mode 100644 index 0000000..5dd2504 --- /dev/null +++ b/src/index.tsx @@ -0,0 +1,5 @@ +import ReactDOM from "react-dom"; + +import { App } from "./App"; + +ReactDOM.render(, document.getElementById("root")); diff --git a/src/types.ts b/src/types.ts new file mode 100644 index 0000000..f31f14e --- /dev/null +++ b/src/types.ts @@ -0,0 +1,10 @@ +import { Dispatch, SetStateAction } from "react"; + +export interface ContextData { + // TODO: describe state +} + +export interface ContextValue { + state: ContextData; + setState: Dispatch>; +}