Merge pull request #2 from gabrielduete/feat/create-header

package.json

@@ -32,6 +32,10 @@
     "postinstall": "husky install"
   },
   "dependencies": {
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "@mui/icons-material": "^5.14.3",
+    "@mui/material": "^5.14.3",
     "next": "12.2.5",
     "react": "18.2.0",
     "react-dom": "18.2.0",

pages/index.tsx

@@ -1,5 +1,7 @@
+import Header from '~/src/components/Header'
+
 const Home = () => {
-  return <h1 className='text-3xl font-bold underline'>HELLO WORLD!</h1>
+  return <Header />
 }
 
 export default Home

src/components/Header/Header.data.ts

@@ -0,0 +1,7 @@
+export const TEXTS_SIDEBAR = [
+  'Home',
+  'Find a doctor',
+  'Apps',
+  'Testimonials',
+  'About us',
+]

src/components/Header/Header.spec.tsx

@@ -0,0 +1,21 @@
+import { render, waitFor, screen } from '@testing-library/react'
+
+import { TEXTS_SIDEBAR } from './Header.data'
+
+import Header from '.'
+
+describe('<Header />', () => {
+  beforeEach(() => {
+    render(<Header />)
+  })
+
+  it.each(TEXTS_SIDEBAR)('should render %p correctly', text => {
+    waitFor(() => expect(screen.getByText(text)).toBeInTheDocument())
+  })
+
+  it('should render logo correctly', () => {
+    const title = 'Trafalgar'
+
+    expect(screen.getByText(title)).toBeInTheDocument()
+  })
+})

src/components/Header/Logo/index.tsx

@@ -0,0 +1,12 @@
+const Logo = () => {
+  return (
+    <div className='flex items-center justify-center gap-3 w-40'>
+      <p className='text-3xl font-semibold text-white bg-blue-500 p-1 rounded-full w-11 flex justify-center'>
+        T
+      </p>
+      <h1 className='text-2xl font-semibold text-slate-950'>Trafalgar</h1>
+    </div>
+  )
+}
+
+export default Logo

src/components/Header/Siderbar/Sidebar.spec.tsx

@@ -0,0 +1,35 @@
+import { render, waitFor, screen } from '@testing-library/react'
+
+import { TEXTS_SIDEBAR } from '../Header.data'
+
+import SideBar from '.'
+
+describe('<SideBar />', () => {
+  it.each(TEXTS_SIDEBAR)('should render text %p when isOpen is true', text => {
+    render(
+      <SideBar
+        isOpen={true}
+        onClose={() => {
+          console.log('como é amigo?')
+        }}
+      />
+    )
+
+    expect(screen.getByText(text)).toBeInTheDocument()
+  })
+
+  it('close sideBar when isOpen is false', () => {
+    render(
+      <SideBar
+        isOpen={false}
+        onClose={() => {
+          console.log('como é amigo?')
+        }}
+      />
+    )
+
+    waitFor(() => {
+      expect(TEXTS_SIDEBAR[0]).not.toBeInTheDocument()
+    })
+  })
+})

src/components/Header/Siderbar/index.tsx

@@ -0,0 +1,34 @@
+import Texts from '../Texts'
+import { TEXTS_SIDEBAR } from '../Header.data'
+import CloseIcon from '@mui/icons-material/Close'
+
+type SideBarProps = {
+  isOpen: boolean
+  onClose: () => void
+}
+
+const SideBar = ({ isOpen, onClose }: SideBarProps) => {
+  return (
+    <nav
+      className={`
+          right-0
+          top-0
+          h-screen
+          bg-sky-100
+          flex
+          flex-col
+          gap-2
+          justify-start
+          items-center
+          p-7
+          max-w-xs
+          ${isOpen ? 'absolute' : 'hidden'}
+        `}
+    >
+      <CloseIcon className='self-end w-7' onClick={onClose} />
+      <Texts items={TEXTS_SIDEBAR} isColumn={true} />
+    </nav>
+  )
+}
+
+export default SideBar

src/components/Header/Texts/index.tsx

@@ -0,0 +1,25 @@
+export type ItemsProps = {
+  items: Array<string>
+  isColumn?: boolean
+}
+
+const Texts = ({ items, isColumn }: ItemsProps) => {
+  return (
+    <div>
+      <ul className={`flex gap-10 ${isColumn && 'flex-col'} `}>
+        {items.map(item => {
+          return (
+            <li
+              className='cursor-pointer text-lg text-slate-400 hover:text-black	delay-50 duration-500 font-medium list-none'
+              key={item}
+            >
+              {item}
+            </li>
+          )
+        })}
+      </ul>
+    </div>
+  )
+}
+
+export default Texts

src/components/Header/index.tsx

@@ -0,0 +1,27 @@
+import { useState } from 'react'
+import Logo from './Logo'
+import Texts from './Texts'
+import SideBar from './Siderbar'
+
+import MenuIcon from '@mui/icons-material/Menu'
+
+import { TEXTS_SIDEBAR } from './Header.data'
+
+const Header = () => {
+  const [isOpen, setIsOpen] = useState<boolean>(false)
+
+  return (
+    <>
+      <SideBar isOpen={isOpen} onClose={() => setIsOpen(false)} />
+      <header className='flex justify-between items-center p-4 xl:px-48 xl:py-16'>
+        <Logo />
+        <nav className='hidden xl:block'>
+          <Texts items={TEXTS_SIDEBAR} />
+        </nav>
+        <MenuIcon onClick={() => setIsOpen(true)} className='block xl:hidden' />
+      </header>
+    </>
+  )
+}
+
+export default Header

styles/globals.css

@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght@100;200;300;400;500;600&family=Roboto:wght@100;300;400;700&display=swap');
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;

tailwind.config.js

@@ -4,12 +4,14 @@ module.exports = {
     './app/**/*.{js,ts,jsx,tsx,mdx}',
     './pages/**/*.{js,ts,jsx,tsx,mdx}',
     './components/**/*.{js,ts,jsx,tsx,mdx}',
-
-    // Or if using `src` directory:
     './src/**/*.{js,ts,jsx,tsx,mdx}',
   ],
   theme: {
-    extend: {},
+    extend: {
+      fontFamily: {
+        sans: ['Segoe UI'],
+      },
+    },
   },
   plugins: [],
 }