pomeroyi
/
hawkband-nextjs


			
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485
							
import PropTypes from 'prop-types';
import Head from 'next/head';
import { CacheProvider } from '@emotion/react';
import theme from '../src/theme';
import createEmotionCache from '../src/createEmotionCache';
import Layout from '../components/Layout'
import * as React  from 'react';
import App from 'next/app';
import { useState } from "react";
import "@fontsource/roboto";
import {
  CssBaseline,  FormGroup,
} from "@mui/material";
import { createTheme, ThemeProvider } from "@mui/material/styles";
import Grid from "@material-ui/core/Grid";
import { makeStyles } from "@material-ui/core";
import { useTheme } from "@material-ui/core/styles";
import useMediaQuery from "@material-ui/core/useMediaQuery";
import { withTheme } from "../components/light_dark";
import FormControlLabel from "@material-ui/core/FormControlLabel";
import Switch from "@material-ui/core/Switch";

const useStyles = makeStyles((theme) => ({
  root: {
    width: "100%",
    height: "100%",
    [theme.breakpoints.down("xs")]: {
      paddingTop: theme.spacing(2),
    },
  },
}));

const DynamicComponentWithNoSSR = <>Some JSX</>
// Client-side cache, shared for the whole session of the user in the browser.
const clientSideEmotionCache = createEmotionCache();
function MyApp(props) {
  const { darkMode, setDarkMode } = props;
  const classes = useStyles();
  const Theme = useTheme();
  const matches = useMediaQuery(theme.breakpoints.down("xs"));

  const { Component, emotionCache = clientSideEmotionCache, pageProps } = props;
  if (typeof window !== 'undefined') {
    console.log('You are on the browser')
  } else {
    console.log('You are on the server')
  }


return (
  <>
    <CacheProvider value={emotionCache}>
      <Head>
        <meta name="viewport" content="initial-scale=1, width=device-width" />
      </Head>
      <Layout>
        <ThemeProvider theme={Theme}>
          {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
         <CssBaseline />
          <Component {...pageProps} />
          <FormGroup>
            <FormControlLabel
              control={
                <Switch            
                  checked={theme}
                  onChange={() => withTheme(!theme)} />
                  }
                  label="Dark Mode"
                />
          </FormGroup>
        </ThemeProvider>
      </Layout> 
    </CacheProvider>
  </>
  );
}
MyApp.propTypes = {
  Component: PropTypes.elementType.isRequired,
  emotionCache: PropTypes.object,
  pageProps: PropTypes.object.isRequired,

};

export default withTheme(MyApp);