text: import * as React from 'react'
  import { Link } from 'gatsby'
  import {
    container,
    heading,
    navLinks,
    navLinkItem,
    navLinkText
  } from './layout.module.css'
  import UserState from '../../context/User/UserState'
  
  const Layout = ({ pageTitle, children }) => {
    return (
      <UserState>
      <div className={container}>
        <title>{pageTitle}</title>
        <nav>
          <ul className={navLinks}>
            <li className={navLinkItem}>
              <Link to="/" className={navLinkText}>
                Home
              </Link>
            </li>
            <li className={navLinkItem}>
              <Link to="/about" className={navLinkText}>
                About
              </Link>
            </li>
            <li className={navLinkItem}>
              <Link to="/user" className={navLinkText}>
                Users
              </Link>
            </li>
            <li className={navLinkItem}>
              <Link to="/register" className={navLinkText}>
                Register
              </Link>
            </li>
          </ul>
        </nav>
        <main>
          <h1 className={heading}>{pageTitle}</h1>
          {children}
        </main>
      </div>
      </UserState>
    )
  }
  
  export default Layout