feat: create about page

jest.config.js

@@ -5,17 +5,10 @@ module.exports = {
     '/.next/',
     'stories.tsx',
     '/mock',
-    '/pages',
-    '/constants',
-    '/styles'
-  ],
-  coveragePathIgnorePatterns: [
-    'stories.tsx',
-    '/mock',
-    '/pages',
     '/constants',
     '/styles'
   ],
+  coveragePathIgnorePatterns: ['stories.tsx', '/mock', '/constants', '/styles'],
   transformIgnorePatterns: ['node_modules/(?!imask|react-extras)'],
   collectCoverage: true,
   collectCoverageFrom: ['src/**/*.ts(x)?'],

src/components/header/header.spec.tsx

@@ -0,0 +1,32 @@
+import { render, screen } from '@testing-library/react'
+import { Header } from './header'
+
+describe('<Header />', () => {
+  it('should be render a Header component', () => {
+    render(<Header />)
+
+    expect(
+      screen.getByRole('heading', {
+        name: /randomfy/i
+      })
+    ).toBeInTheDocument()
+
+    expect(
+      screen.getByRole('link', {
+        name: /home/i
+      })
+    ).toBeInTheDocument()
+
+    expect(
+      screen.getByRole('link', {
+        name: /about/i
+      })
+    ).toBeInTheDocument()
+
+    expect(
+      screen.getByRole('link', {
+        name: /log out/i
+      })
+    ).toBeInTheDocument()
+  })
+})

src/components/header/header.tsx

@@ -0,0 +1,22 @@
+import Link from 'next/link'
+import { Title } from 'components'
+
+export const Header = () => {
+  return (
+    <div className="mt-8 p-4 flex justify-between items-center sm:flex-row flex-col">
+      <Title>Randomfy</Title>
+
+      <header className="flex flex-col">
+        <nav className="text-2xl font-thin dark:text-gray-300 text-gray-700 leading-10 tracking-wide">
+          <Link href="/">Home</Link>
+        </nav>
+        <nav className="text-2xl font-thin dark:text-gray-300 text-gray-700 leading-10 tracking-wide">
+          <Link href="/about">About</Link>
+        </nav>
+        <nav className="text-2xl font-thin dark:text-gray-300 text-gray-700 leading-10 tracking-wide">
+          <Link href="/logout">Log out</Link>
+        </nav>
+      </header>
+    </div>
+  )
+}

src/components/header/index.ts

@@ -0,0 +1 @@
+export { Header } from './header'

src/components/index.ts

@@ -6,3 +6,4 @@ export { Title } from './title'
 export { SubTitle } from './sub-title'
 export { PrimaryButton } from './primary-button'
 export { PrimaryText } from './primary-text'
+export { Header } from './header'

src/features/match/match.spec.tsx

@@ -38,12 +38,6 @@ describe('<Match />', () => {
       />
     )
 
-    expect(
-      screen.getByRole('heading', {
-        name: /randomfy/i
-      })
-    ).toBeInTheDocument()
-
     expect(screen.getAllByText(/fish beach/i)).toHaveLength(
       MAX_ARTISTS_TO_SHOW_PER_TURN
     )

src/features/match/match.tsx

@@ -51,15 +51,7 @@ export const Match = ({
 
   return likedArtists.length < MAX_RANDOM_FY_ITEMS ? (
     <Fragment>
-      <div
-        className={`mt-8 p-4 flex items-center ${
-          isRefetching ? 'animate-pulse' : ''
-        }`}
-      >
-        <Title>Randomfy</Title>
-        {isRefetching && <span className="ml-4">refetching...</span>}
-      </div>
-
+      {isRefetching && <span className="ml-4">refetching...</span>}
       <Grid>
         {isLoading && <ImageBoxSkeleton />}
         {newArtists.map((artist) => (

src/features/picture/picture.tsx

@@ -38,9 +38,6 @@ export const Picture = ({
 
   return artists.length >= MAX_RANDOM_FY_ITEMS ? (
     <div id="grid" className="max-w-5xl my-0 mx-auto">
-      <div className="p-4">
-        <Title>Randomfy</Title>
-      </div>
       <div className="p-4" id="subtitle">
         <PrimaryText>You can download your randomfy!</PrimaryText>
       </div>

src/pages/about.tsx

@@ -0,0 +1,72 @@
+import { Content, Header, PrimaryText, SubTitle } from 'components'
+
+const About = () => {
+  return (
+    <Content>
+      <Header />
+      <div className="p-4 mt-8 mb-0 mx-auto sm:w-4/5 w-full">
+        <SubTitle>About</SubTitle>
+        <div className="mt-8">
+          <PrimaryText>
+            Randomfy takes your most listened to Spotify artists and select one
+            of them for you can know new artists based in this artist selected.
+            If you liked that artist, you can give a like. After that, you can
+            make a playlist with the artists liked and share with your friends.
+            Also you can create a picture with this artists.
+          </PrimaryText>
+          <div className="mt-6">
+            <PrimaryText>
+              Disclaimer: Randomfy is not affiliated with Spotify. The site is
+              built on Nextjs, React and the Spotify API.
+            </PrimaryText>
+          </div>
+          <div className="mt-6">
+            <PrimaryText>
+              Why are you reading this? You must be bored. Go listen to new
+              artists.
+            </PrimaryText>
+          </div>
+        </div>
+
+        <div className="mt-12">
+          <SubTitle>Developer</SubTitle>
+          <div className="mt-6">
+            <PrimaryText>Raul Andrade</PrimaryText>
+          </div>
+        </div>
+
+        <div className="mt-12 pb-12">
+          <SubTitle>Follow me on</SubTitle>
+          <div className="mt-2 flex flex-col">
+            <a
+              className="text-2xl font-thin dark:text-gray-300 text-gray-700 leading-10 tracking-wide"
+              href="https://github.com/andraderaul"
+              target="_blank"
+              rel="noreferrer"
+            >
+              Github
+            </a>
+            <a
+              className="text-2xl font-thin dark:text-gray-300 text-gray-700 leading-10 tracking-wide"
+              href="https://www.linkedin.com/in/andraderaul/"
+              target="_blank"
+              rel="noreferrer"
+            >
+              Linkedin
+            </a>
+            <a
+              className="text-2xl font-thin dark:text-gray-300 text-gray-700 leading-10 tracking-wide"
+              href="https://twitter.com/theandraderaul"
+              target="_blank"
+              rel="noreferrer"
+            >
+              Twitter
+            </a>
+          </div>
+        </div>
+      </div>
+    </Content>
+  )
+}
+
+export default About

src/templates/home/authenticated.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import { Content } from 'components'
+import { Content, Header } from 'components'
 
 import { Recommendation } from 'types'
 
@@ -20,13 +20,14 @@ export const Authenticated = ({ artistId }: AuthenticatedProps) => {
       value={{ source: currentPlaying, setSource: setCurrentPlaying }}
     >
       <Content>
+        <Header />
         <Match
           artistId={artistId}
           likedArtists={likedArtists}
           setLikedArtists={setLikedArtists}
         />
-        <Picture artists={likedArtists} />
         <Playlist artists={likedArtists} />
+        <Picture artists={likedArtists} />
       </Content>
     </AudioContext.Provider>
   )

src/templates/home/non-authenticated.tsx

@@ -1,13 +1,11 @@
 import Image from 'next/image'
-import { Title, Content, SubTitle, PrimaryText } from 'components'
+import { Content, SubTitle, PrimaryText, Header } from 'components'
 import Link from 'next/link'
 
 export const NonAuthenticated = () => {
   return (
     <Content>
-      <div className="mt-8 p-4">
-        <Title>Randomfy</Title>
-      </div>
+      <Header />
       <div className="p-4 mt-8 mb-0 mx-auto sm:w-4/5 w-full">
         <SubTitle>Yeah.</SubTitle>
         <SubTitle>Hello music lover!</SubTitle>