import Link from 'next/link' ; import React from 'react' ; const links = [ { key : '1' , href : 'https://github.com/mthomps4/next-now-test' , label : 'Github' } , { key : '2' , href : '/api/appEnv' , label : 'api/appEnv' } , { key : '3' , href : '/api/date' , label : 'api/date' } , { key : '4' , href : '/api/users' , label : 'api/users' } ] . map ( link => { link . key = `nav-link-${ link . href }-${ link . label }` ; return link ; } ) ; const Nav = ( ) => ( < nav > < ul > < li > < Link prefetch href = "/" > < a > Home < /a> < /Link> < /li> < ul > { links . map ( ( { key , href , label } ) => ( < li key = { key } > < Link href = { href } > < a > { label } < /a> < /Link> < /li>))} < /ul> < /ul> < style jsx > { `
      :global(body) {
        margin: 0;
        font-family: -apple-system, BlinkMacSystemFont, Avenir Next, Avenir, Helvetica, sans-serif;
      }
      nav {
        text-align: center;
      }
      ul {
        display: flex;
        justify-content: space-between;
      }
      nav > ul {
        padding: 4px 16px;
      }
      li {
        display: flex;
        padding: 6px 8px;
      }
      a {
        color: #067df7;
        text-decoration: none;
        font-size: 13px;
      }
    ` } < /style> < /nav>); export default Nav ;