import { Fragment , useContext , useEffect } from 'react' ; import Head from 'next/head' ; import { Disclosure , Menu , Transition } from '@headlessui/react' ; import { BellIcon , MenuIcon , XIcon } from '@heroicons/react/outline' ; import { parseCookies } from 'nookies' ; import { AuthContext } from '../contexts/AuthContext' ; import { api } from '../services/api' ; import { GetServerSideProps } from 'next' ; import { getAPIClient } from '../services/axios' ; const navigation = [ 'Dashboard' , 'Team' , 'Projects' , 'Calendar' , 'Reports' ] ; const profile = [ 'Your Profile' , 'Settings' ] ; function classNames ( ... classes ) { return classes . filter ( Boolean ) . join ( ' ' ) ; } export default function Dashboard ( ) { const { user } = useContext ( AuthContext ) ; useEffect ( ( ) => { } , [ ] ) ; return ( < div > < Head > < title > Dashboard < /title> < /Head> < Disclosure as = "nav" className = "bg-gray-800" > { ( { open } ) => ( < > < div className = "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8" > < div className = "flex items-center justify-between h-16" > < div className = "flex items-center" > < div className = "flex-shrink-0" > < img className = "h-8 w-8" src = "https://tailwindui.com/img/logos/workflow-mark-indigo-500.svg" alt = "Workflow" / > < /div> < div className = "hidden md:block" > < div className = "ml-10 flex items-baseline space-x-4" > { navigation . map ( ( item , itemIdx ) => itemIdx === 0 ? ( < Fragment key = { item } > { } < a href = "#" className = "bg-gray-900 text-white px-3 py-2 rounded-md text-sm font-medium" > { item } < /a> < /Fragment>) : (<a key={item} href="#" className="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium"> { item } < /a>))} < /div> < /div> < /div> < div className = "hidden md:block" > < div className = "ml-4 flex items-center md:ml-6" > < button className = "bg-gray-800 p-1 rounded-full text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white" > < span className = "sr-only" > View notifications < /span> < BellIcon className = "h-6 w-6" aria - hidden = "true" / > < /button> { } < Menu as = "div" className = "ml-3 relative" > { ( { open } ) => ( < > < div > < Menu . Button className = "max-w-xs bg-gray-800 rounded-full flex items-center text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white" > < span className = "sr-only" > Open user menu < /span> < img className = "h-8 w-8 rounded-full" src = { user ?. avatar_url } alt = "" / > < /Menu.Button> < /div> < Transition show = { open } as = { Fragment } enter = "transition ease-out duration-100" 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 static 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" > { profile . map ( ( item ) => ( < Menu . Item key = { item } > { ( { active } ) => ( < a href = "#" className = { classNames ( active ? 'bg-gray-100' : '' , 'block px-4 py-2 text-sm text-gray-700' ) } > { item } < /a>)} < /Menu.Item>))} < Menu . Item > < a href = "#" className = 'block px-4 py-2 text-sm text-gray-700' > Sign out < /a> < /Menu.Item> < /Menu.Items> < /Transition> < />)} < /Menu> < /div> < /div> < div className = "-mr-2 flex md:hidden" > { } < Disclosure . Button className = "bg-gray-800 inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white" > < 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 = "md:hidden" > < div className = "px-2 pt-2 pb-3 space-y-1 sm:px-3" > { navigation . map ( ( item , itemIdx ) => itemIdx === 0 ? ( < Fragment key = { item } > { } < a href = "#" className = "bg-gray-900 text-white block px-3 py-2 rounded-md text-base font-medium" > { item } < /a> < /Fragment>) : (<a key={item} href="#" className="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium"> { item } < /a>))} < /div> < div className = "pt-4 pb-3 border-t border-gray-700" > < div className = "flex items-center px-5" > < div className = "flex-shrink-0" > < img className = "h-10 w-10 rounded-full" src = { user ?. avatar_url } alt = "" / > < /div> < div className = "ml-3" > < div className = "text-base font-medium leading-none text-white" > Diego Fernandes < /div> < div className = "text-sm font-medium leading-none text-gray-400" > diego @ rocketseat . com . br < /div> < /div> < button className = "ml-auto bg-gray-800 flex-shrink-0 p-1 rounded-full text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white" > < span className = "sr-only" > View notifications < /span> < BellIcon className = "h-6 w-6" aria - hidden = "true" / > < /button> < /div> < div className = "mt-3 px-2 space-y-1" > { profile . map ( ( item ) => ( < a key = { item } href = "#" className = "block px-3 py-2 rounded-md text-base font-medium text-gray-400 hover:text-white hover:bg-gray-700" > { item } < /a>))} < a href = "#" className = "block px-3 py-2 rounded-md text-base font-medium text-gray-400 hover:text-white hover:bg-gray-700" > Sign out < /a> < /div> < /div> < /Disclosure.Panel> < />)} < /Disclosure> < header className = "bg-white shadow" > < div className = "max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8" > < h1 className = "text-3xl font-bold text-gray-900" > Dashboard < /h1> < /div> < /header> < main > < div className = "max-w-7xl mx-auto py-6 sm:px-6 lg:px-8" > { } < div className = "px-4 py-6 sm:px-0" > < div className = "border-4 border-dashed border-gray-200 rounded-lg h-96" / > < /div> { } < /div> < /main> < /div>); } export const getServerSideProps = async ( ctx ) => { const apiClient = getAPIClient ( ctx ) ; const { [ 'nextauth.token' ] : token } = parseCookies ( ctx ) ; if ( ! token ) { return { redirect : { destination : '/' , permanent : false , } } ; } await apiClient . get ( '/users' ) ; return { props : { } } ; } ;