feat: add next N progress bar

package.json

@@ -18,6 +18,7 @@
     "@heroicons/react": "^1.0.5",
     "axios": "^0.26.0",
     "next": "12.1.0",
+    "nextjs-progressbar": "^0.0.13",
     "nookies": "^2.5.2",
     "react": "17.0.2",
     "react-dom": "17.0.2",

src/pages/_app.tsx

@@ -1,6 +1,7 @@
 import 'styles/globals.css'
 import type { AppProps } from 'next/app'
 import Head from 'next/head'
+import NextNProgress from 'nextjs-progressbar'
 
 function MyApp({ Component, pageProps }: AppProps) {
   return (
@@ -17,6 +18,12 @@ function MyApp({ Component, pageProps }: AppProps) {
           content="This is a project that will show artists and musics based in the recommendation from Spotify"
         />
       </Head>
+      <NextNProgress
+        color="#171717"
+        startPosition={0.3}
+        stopDelayMs={200}
+        height={3}
+      />
       <Component {...pageProps} />
     </>
   )

src/templates/home/non-authenticated.tsx

@@ -9,10 +9,11 @@ export const NonAuthenticated = () => {
       </div>
       <div className="p-4">
         <div className="flex justify-center">
+          {/* TODO: IMPROVE THIS!!!! */}
           <Link href="/api/login">
             <a
-              className="w-20 text-slate-50 rounded-full 
-                text-center bg-gray-800 p-1"
+              className="w-20 text-slate-50 rounded-full text-center bg-gray-800 p-1"
+              aria-label="login button"
             >
               Login
             </a>