import { Disclosure , Menu , Transition } from '@headlessui/react' ; import { BellIcon , MenuIcon , XIcon } from '@heroicons/react/outline' ; import { PlusIcon } from '@heroicons/react/solid' ; import React , { Fragment } from 'react' ; import { NavBarProps } from '../../../../interfaces/index' ; import { AddContractModal } from '../AddContractModal' ; import { ContractErrorModal } from '../ContractErrorModal' ; function classNames ( ... classes ) { return classes . filter ( Boolean ) . join ( ' ' ) ; } export const NavBar = ( { title , headerNavigation , userNavigation , user , logo , contractProps , contractErrorProps , } ) => { return ( < div className = "bg-gray-50" > < Disclosure as = "nav" className = "bg-white shadow-sm" > { ( { open } ) => ( < > < div className = "w-full px-24" > < div className = "flex justify-between h-16" > < div className = "flex" > < div className = "flex-shrink-0 flex items-center" > < img className = "block h-16 w-auto" src = { logo } alt = "Popcorn logo" / > < /div> < div className = "hidden sm:-my-px sm:ml-6 sm:flex sm:space-x-8" > { headerNavigation && headerNavigation . map ( ( item ) => ( < a key = { item . name } href = { item . href } className = { classNames ( item . current ? 'border-blue-500 text-gray-900' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300' , 'inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium' ) } aria - current = { item . current ? 'page' : undefined } > { item . name } < /a>))} < /div> < /div> < div className = "hidden sm:ml-6 sm:flex sm:items-center" > < button type = "button" onClick = { ( ) => contractProps . setOpen ( ! contractProps . open ) } className = "inline-flex items-center px-3 py-2 border border-transparent shadow-sm text-sm leading-4 font-medium rounded-md text-white relative right-1 bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" > < PlusIcon className = "-ml-0.5 mr-2 h-4 w-4" aria - hidden = "true" / > Add Contract < /button> < button className = "bg-white p-1 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" > < span className = "sr-only" > View notifications < /span> < BellIcon className = "h-6 w-6" aria - hidden = "true" / > < /button> { } < Menu as = "div" className = "ml-3 relative" > < div > < Menu . Button className = "bg-white flex text-sm rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" > < span className = "sr-only" > Open user menu < /span> < img className = "h-8 w-8 rounded-full" src = { user ?. imageUrl } alt = "" / > < /Menu.Button> < /div> < Transition as = { Fragment } enter = "transition ease-out duration-200" enterFrom = "transform opacity-0 scale-95" enterTo = "transform opacity-100 scale-100" leave = "transition ease-in duration-75" leaveFrom = "transform opacity-100 scale-100" leaveTo = "transform opacity-0 scale-95" > < Menu . Items className = "origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none" > { userNavigation && userNavigation . map ( ( item ) => ( < Menu . Item key = { item . name } > { ( { active } ) => ( < a href = { item . href } className = { classNames ( active ? 'bg-gray-100' : '' , 'block px-4 py-2 text-sm text-gray-700' ) } > { item . name } < /a>)} < /Menu.Item>))} < /Menu.Items> < /Transition> < /Menu> < /div> < div className = "-mr-2 flex items-center sm:hidden" > { } < Disclosure . Button className = "bg-white inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" > < span className = "sr-only" > Open main menu < /span> { open ? ( < XIcon className = "block h-6 w-6" aria - hidden = "true" / > ) : ( < MenuIcon className = "block h-6 w-6" aria - hidden = "true" / > ) } < /Disclosure.Button> < /div> < /div> < /div> < Disclosure . Panel className = "sm:hidden" > < div className = "pt-2 pb-3 space-y-1" > { headerNavigation && headerNavigation . map ( ( item ) => ( < a key = { item . name } href = { item . href } className = { classNames ( item . current ? 'bg-blue-50 border-blue-500 text-blue-700' : 'border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800' , 'block pl-3 pr-4 py-2 border-l-4 text-base font-medium' ) } aria - current = { item . current ? 'page' : undefined } > { item . name } < /a>))} < /div> < div className = "pt-4 pb-3 border-t border-gray-200" > < div className = "flex items-center px-4" > < div className = "flex-shrink-0" > < img className = "h-10 w-10 rounded-full" src = { user ?. imageUrl } alt = "" / > < /div> < div className = "ml-3" > < div className = "text-base font-medium text-gray-800" > { user ?. name } < /div> < div className = "text-sm font-medium text-gray-500" > { user ?. email } < /div> < /div> < button className = "ml-auto bg-white flex-shrink-0 p-1 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" > < span className = "sr-only" > View notifications < /span> < BellIcon className = "h-6 w-6" aria - hidden = "true" / > < /button> < /div> < div className = "mt-3 space-y-1" > { userNavigation . map ( ( item ) => ( < a key = { item . name } href = { item . href } className = "block px-4 py-2 text-base font-medium text-gray-500 hover:text-gray-800 hover:bg-gray-100" > { item . name } < /a>))} < /div> < /div> < /Disclosure.Panel> < />)} < /Disclosure> < div className = "py-10" > < header > < div className = "px-4 sm:px-6 lg:px-8" > < h1 className = "text-3xl text-center font-medium leading-tight text-gray-700" > { title } < /h1> < /div> < /header> < /div> < AddContractModal { ... contractProps } / > < ContractErrorModal { ... contractErrorProps } / > < /div>); } ;