pomeroyi
/
hawkband-nextjs


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576
							
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, ToggleButton,
} 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 dynamic from 'next/dynamic';
import styled from '@emotion/styled';
const toggleTheme = dynamic(() => import("../components/light_dark"),{
  ssr:false
});

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 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} />
          <toggleTheme/>
        </ThemeProvider>
      </Layout> 
    </CacheProvider>
  </>
  );
}
MyApp.propTypes = {
  Component: PropTypes.elementType.isRequired,
  emotionCache: PropTypes.object,
  pageProps: PropTypes.object.isRequired,

};

export default MyApp;