text: /** @jsx jsx */
  import React from 'react'
  import { InertiaLink } from '@inertiajs/inertia-react'
  
  import tw from 'twin.macro'
  import { jsx } from "@emotion/core";
  
  
  const TopNav = () => {
    return (
  
        <nav css={tw`flex items-center justify-between flex-wrap bg-teal-500 p-6`}>
          <div css={tw`flex items-center flex-shrink-0 text-white mr-6`}>
            <svg css={tw`fill-current h-8 w-8 mr-2`} width="54" height="54" viewBox="0 0 54 54" xmlns="http://www.w3.org/2000/svg"><path d="M13.5 22.1c1.8-7.2 6.3-10.8 13.5-10.8 10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05zM0 38.3c1.8-7.2 6.3-10.8 13.5-10.8 10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05z"/></svg>
            <span css={tw`font-semibold text-xl tracking-tight`}>Tailwind CSS</span>
          </div>
          <div css={tw`block lg:hidden`}>
            <button css={tw`flex items-center px-3 py-2 border rounded text-teal-200 border-teal-400 hover:text-white hover:border-white`}>
              <svg css={tw`fill-current h-3 w-3`} viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
            </button>
          </div>
          <div css={tw`w-full block flex-grow lg:flex lg:items-center lg:w-auto`}>
            <div css={tw`text-sm lg:flex-grow`}>
              <InertiaLink href="/" css={tw`block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white mr-4`}>Home</InertiaLink>
              <InertiaLink href="/about" css={tw`block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white`}>About</InertiaLink>
            </div>
            <div>
              <a href="#" css={tw`inline-block text-sm px-4 py-2 leading-none border rounded text-white border-white hover:border-transparent hover:text-teal-500 hover:bg-white mt-4 lg:mt-0`}>Download</a>
            </div>
          </div>
        </nav>
    );
  };
  
  export default TopNav;
  