import React , { useState } from "react" ; import Link from "next/link" ; import Transition from "./Transition" ; const Header = ( ) => { const [ menuOpen , setMenuOpen ] = useState ( false ) ; return ( < div className = "relative py-6" > < nav className = "max-w-screen-md mx-auto flex items-center justify-between px-4 sm:px-6 md:px-8 lg:px-0" > < Link href = "/" > < a className = "flex items-center" > < img className = "h-10 w-auto sm:h-12 my-2" src = "/favicon.svg" alt = "" / > < div className = "ml-5 flex flex-col justify-center" > < div className = "font-bold text-gray-900 dark:text-gray-200 leading-tight text-2xl sm:text-3xl tracking-tight" > deno doc < /div> < div className = "font-normal text-gray-900 dark:text-gray-200 text-sm sm:text-lg leading-tight tracking-tight" > Documentation Generator < /div> < /div> < /a> < /Link> < div className = "-mr-2 flex items-center lg:hidden" > < button type = "button" className = "inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100 hover:bg-gray-50 dark:hover:bg-light-black-800 focus:outline-none focus:text-gray-900 focus:bg-gray-50 dark:focus:bg-light-black-800 transition duration-150 ease-in-out" onClick = { ( ) => setMenuOpen ( true ) } > < svg className = "h-6 w-6" stroke = "currentColor" fill = "none" viewBox = "0 0 24 24" > < title > Menu | Deno < /title> < path strokeLinecap = "round" strokeLinejoin = "round" strokeWidth = "2" d = "M4 6h16M4 12h16M4 18h7" / > < /svg> < /button> < /div> < div className = "hidden lg:flex md:ml-10 items-end" > < a href = "https://deno.land/" className = "font-medium text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100 transition duration-150 ease-in-out" > Home < /a> < a href = "https://deno.land/manual" className = "ml-10 font-medium text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100 transition duration-150 ease-in-out" > Manual < /a> < Link href = "/about" > < a className = "ml-10 font-medium text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100 transition duration-150 ease-in-out" > About < /a> < /Link> < a href = "https://github.com/denoland" className = "ml-10 text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100 transition duration-150 ease-in-out" > < span className = "sr-only" > GitHub < /span> < svg className = "h-6 w-6 inline" fill = "currentColor" viewBox = "0 0 24 24" > < title > Github | Deno < /title> < path fillRule = "evenodd" d = "M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clipRule = "evenodd" / > < /svg> < /a> < /div> < /nav> < Transition show = { menuOpen } enter = "duration-150 ease-out" enterFrom = "opacity-0 scale-95" enterTo = "opacity-100 scale-100" leave = "duration-100 ease-in" leaveFrom = "opacity-100 scale-100" leaveTo = "opacity-0 scale-95" > < div className = "absolute z-10 top-0 inset-x-0 p-2 transition transform origin-top-right lg:hidden" > < div className = "rounded-lg shadow-md" > < div className = "rounded-lg bg-white dark:bg-light-black-800 shadow-xs overflow-hidden" > < div className = "px-5 pt-4 flex items-center justify-between" > < Link href = "/" > < a className = "flex items-center" > < img className = "h-10 w-auto sm:h-12 my-2" src = "/favicon.svg" alt = "" / > < div className = "ml-5 flex flex-col justify-center" > < div className = "font-bold text-gray-900 dark:text-gray-200 leading-tight text-2xl sm:text-3xl tracking-tight" > deno doc < /div> < div className = "font-normal text-gray-900 dark:text-gray-200 text-sm sm:text-lg leading-tight tracking-tight" > Documentation Generator < /div> < /div> < /a> < /Link>{" "} < div className = "-mr-2" > < button type = "button" className = "inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100 hover:bg-gray-50 dark:hover:bg-light-black-900 focus:outline-none focus:text-gray-900 focus:bg-gray-50 dark:focus:bg-light-black-900 transition duration-150 ease-in-out" onClick = { ( ) => setMenuOpen ( false ) } > < svg className = "h-6 w-6" stroke = "currentColor" fill = "none" viewBox = "0 0 24 24" > < path strokeLinecap = "round" strokeLinejoin = "round" strokeWidth = "2" d = "M6 18L18 6M6 6l12 12" / > < /svg> < /button> < /div> < /div> < div className = "px-2 pt-4 pb-3" > < a href = "https://deno.land/" className = "block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100 hover:bg-gray-50 dark:hover:bg-light-black-900 focus:outline-none focus:text-gray-900 focus:bg-gray-50 dark:focus:bg-light-black-900 transition duration-150 ease-in-out" > Home < /a> < a href = "https://deno.land/manual" className = "block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100 hover:bg-gray-50 dark:hover:bg-light-black-900 focus:outline-none focus:text-gray-900 focus:bg-gray-50 dark:focus:bg-light-black-900 transition duration-150 ease-in-out" > Manual < /a> < Link href = "/about" > < a className = "block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100 hover:bg-gray-50 dark:hover:bg-light-black-900 focus:outline-none focus:text-gray-900 focus:bg-gray-50 dark:focus:bg-light-black-900 transition duration-150 ease-in-out" > About < /a> < /Link> < /div> < /div> < /div> < /div> < /Transition> < /div>); } ; export default Header ;