feat: breadcrumb

jest.config.js

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 const nextJest = require('next/jest')
-const path = require('path')
+// const path = require('path')
 
 const createJestConfig = nextJest({
   dir: './',
@@ -11,10 +11,8 @@ const customJestConfig = {
   moduleDirectories: ['node_modules', '<rootDir>/'],
   testEnvironment: 'jest-environment-jsdom',
   moduleNameMapper: {
-    '^~/src/enums/medias$': path.resolve(__dirname, './src/enums/medias'),
+    '^~/src/(.*)$': '<rootDir>/src/$1',
   },
 }
 
 module.exports = createJestConfig({ ...customJestConfig })
-
-/** o/ font: https://fek.io/blog/add-jest-testing-framework-to-an-existing-next-js-app */

pages/_app.page.tsx

@@ -1,8 +1,7 @@
 import type { AppProps } from 'next/app'
 import Head from 'next/head'
-
-import GlobalStyle from '../src/styles/GlobalStyle'
-import TextsStyle from '../src/styles/TextsStyle'
+import GlobalStyle from '~/src/styles/GlobalStyle'
+import TextsStyle from '~/src/styles/TextsStyle'
 
 function MyApp({ Component, pageProps }: AppProps) {
   return (

pages/about/index.page.tsx

@@ -1,4 +1,5 @@
-import Layout from '../../src/layout/index'
+import Layout from '~/src/layout'
+
 import * as S from './styles'
 
 const About = () => {

pages/index.page.tsx

@@ -3,10 +3,10 @@ import type { NextPage } from 'next'
 import { useEffect } from 'react'
 import { useGlitch } from 'react-powerglitch'
 import Sound from 'react-sound'
+import Equalizer from '~/src/components/Equalizer'
+import { SoundClickButton, SoundGlitch } from '~/src/utils/Sounds'
+import { settingsSound } from '~/src/utils/settingsHome'
 
-import Equalizer from '../src/components/Equalizer'
-import { SoundClickButton, SoundGlitch } from '../src/utils/Sounds'
-import { settingsSound } from '../src/utils/settingsHome'
 import * as S from './styles'
 
 const Home: NextPage = () => {

src/components/Equalizer/styles.ts

@@ -10,7 +10,7 @@ export const Wrapper = styled.div`
 `
 
 export const Line = styled.div`
-  width: 6px;
+  width: var(--spacing-basic-small);
   background-color: var(--white);
   margin: 0 2px;
   animation: equalizer 1.9s steps(20, end) infinite;

src/layout/components/Breadcrumb/index.spec.tsx

@@ -0,0 +1,36 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+import { fireEvent, render, screen } from '@testing-library/react'
+
+import Breadcrumb from '.'
+
+jest.mock('next/router', () => ({
+  useRouter() {
+    return {
+      route: '/',
+      pathname: '',
+      query: '',
+      asPath: '/about/test/param',
+      push: jest.fn(),
+    }
+  },
+}))
+
+const useRouter = jest.spyOn(require('next/router'), 'useRouter')
+
+beforeEach(() => {
+  render(<Breadcrumb />)
+})
+
+describe('<Breadcrumb />', () => {
+  it('should render params correctly', () => {
+    expect(screen.getByText('About')).toBeInTheDocument()
+    expect(screen.getByText('Test')).toBeInTheDocument()
+    expect(screen.getByText('Param')).toBeInTheDocument()
+  })
+
+  it('should redirect to link when param is clicked', () => {
+    fireEvent.click(screen.getByText('About'))
+
+    expect(useRouter).toHaveBeenCalled()
+  })
+})

src/layout/components/Breadcrumb/index.tsx

@@ -0,0 +1,44 @@
+import { useRouter } from 'next/router'
+import React from 'react'
+
+import * as S from './styles'
+
+const Breadcrumb = () => {
+  const router = useRouter()
+
+  const params = router?.asPath.split('/')
+
+  const lastElement = params?.slice(-1)[0]
+
+  const goToPath = (index: number) => {
+    const path = '/' + params.slice(1, index + 1).join('/')
+    router.push(path)
+  }
+
+  return (
+    <S.Container>
+      <S.Icon onClick={() => router.push('/')} />
+      {params?.map((param, index) => {
+        const formatedLink = param.charAt(0).toUpperCase() + param.slice(1)
+
+        const isActualPath = param === lastElement
+
+        return (
+          <>
+            <S.Link
+              onClick={() => {
+                goToPath(index)
+              }}
+              isActualPath={isActualPath}
+            >
+              {formatedLink}
+            </S.Link>
+            {!isActualPath && <S.Simbol>{'>'}</S.Simbol>}
+          </>
+        )
+      })}
+    </S.Container>
+  )
+}
+
+export default Breadcrumb

src/layout/components/Breadcrumb/styles.ts

@@ -0,0 +1,27 @@
+import HomeIcon from '@mui/icons-material/Home'
+import styled from 'styled-components'
+
+export const Container = styled.nav`
+  align-items: center;
+  display: flex;
+`
+
+export const Link = styled.a<{ isActualPath: boolean }>`
+  cursor: pointer;
+  color: ${({ isActualPath }) => isActualPath && 'var(--white)'};
+`
+
+export const Simbol = styled.p`
+  color: var(--green-white);
+  margin: 0 var(--spacing-basic-small);
+`
+
+export const Icon = styled(HomeIcon)`
+  color: var(--green-white);
+  cursor: pointer;
+  transition: 0.3s;
+
+  &:hover {
+    color: var(--white);
+  }
+`

src/components/Footer/styles.ts → src/layout/components/Footer/styles.ts

@@ -1,6 +1,5 @@
 import styled from 'styled-components'
-
-import AnimationHoverLine from '../../styles/AnimationHoverLine'
+import AnimationHoverLine from '~/src/styles/AnimationHoverLine'
 
 export const Footer = styled.footer`
   display: flex;

src/components/Header/styles.ts → src/layout/components/Header/styles.ts

@@ -1,6 +1,5 @@
 import styled from 'styled-components'
-
-import AnimationHoverLine from '../../styles/AnimationHoverLine'
+import AnimationHoverLine from '~/src/styles/AnimationHoverLine'
 
 export const Header = styled.header`
   display: flex;

src/components/NavBar/Desktop/index.tsx → src/layout/components/NavBar/Desktop/index.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react'
+import Equalizer from '~/src/components/Equalizer'
+import { SoundClickButton } from '~/src/utils/Sounds'
 
-import { SoundClickButton } from '../../../utils/Sounds/index'
-import Equalizer from '../../Equalizer'
 import { navBarMock } from '../Navbar.mock'
 import * as S from './styles'
 

src/layout/index.tsx

@@ -1,8 +1,9 @@
 import { ReactNode } from 'react'
 
-import Footer from '../components/Footer'
-import Header from '../components/Header'
-import DesktopNavbar from '../components/NavBar/Desktop'
+import Breadcrumb from './components/Breadcrumb'
+import Footer from './components/Footer'
+import Header from './components/Header'
+import DesktopNavbar from './components/NavBar/Desktop'
 import * as S from './styles'
 
 type LayoutProps = {
@@ -14,7 +15,10 @@ const Layout = ({ children }: LayoutProps) => (
     <Header />
     <S.WrapperContent>
       <DesktopNavbar />
-      <S.Content>{children}</S.Content>
+      <S.Content>
+        <Breadcrumb />
+        {children}
+      </S.Content>
     </S.WrapperContent>
     <Footer />
   </S.Container>

src/layout/styles.ts

@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { breakpoints } from './../utils/breakpoints'
+import { breakpoints } from '../utils/breakpoints'
 
 export const Container = styled.main`
   color: var(--white);