olavea / gatsby-theme-pirate-princess-picture-book

Yarn workspace for maintaining gatsby-theme-pirate-princess-picture-book. Make a picture-book with a pirate-princess in your family :-D
MIT License
0 stars 0 forks source link

<Nav /> LaurieOnTech-eggHead-Video-2 WesBos-Master-Gatsby-Video-5 #13

Open olavea opened 3 years ago

olavea commented 3 years ago
import React from "react"
import {Link, StaticQuery} from "gatsby"
import {graphql} from "gatsby"

const Layout = ({children, data}) => {

  return (
    <StaticQuery
      query ={graphql`
        query MyQuery {
          allFile(sort : {
            fields: name,
            order: ASC
          }) {
            edges {
              node {
                name
              }
              next {
                name
              }
              previous {
                name
              }
            }
          }
        }
      `}
      render={data => (

        <div>
        <header>
          <nav>
            <Link to="/">Change page by changing page number in the browser for example to 02 🎩</Link>
            <Link to={data.allFile.edges.previous}> previous</Link>
            <Link to={data.allFile.edges.next}> next</Link>

          </nav>
        </header>
        <main>{children}</main>
        <footer><p>Written, read and hand drawn by Lillian (6 🦄) Raae-Vea </p></footer>
      </div>

      )}

/>
  )
}
;

export default Layout