text: import React, { useEffect } from 'react'
  import PropTypes from 'prop-types'
  import Head from 'next/head'
  import { CookiesProvider } from 'react-cookie'
  import { ThemeProvider } from '@material-ui/core/styles'
  import CssBaseline from '@material-ui/core/CssBaseline'
  import theme from '../src/theme'
  import '../src/tailwind.css'
  
  export default function MyApp (props) {
    const { Component, pageProps } = props
  
    useEffect(() => {
      // Remove the server-side injected CSS.
      const jssStyles = document.querySelector('#jss-server-side')
      if (jssStyles) {
        jssStyles.parentElement.removeChild(jssStyles)
      }
    }, [])
  
    return (
      <>
        <Head>
          <title>FunnyBoard</title>
          <meta name='viewport' content='minimum-scale=1, initial-scale=1, width=device-width' />
        </Head>
        <ThemeProvider theme={theme}>
          <CookiesProvider>
            {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
            <CssBaseline />
            <Component {...pageProps} />
          </CookiesProvider>
        </ThemeProvider>
      </>
    )
  }
  
  MyApp.propTypes = {
    Component: PropTypes.elementType.isRequired,
    pageProps: PropTypes.object.isRequired
  }
  