Merge pull request #3 from klaryon/feature/navBarComponent

Feature/nav bar component

components/Header.js

@@ -1,23 +1,33 @@
-import { BadgeCheckIcon, CollectionIcon, HomeIcon, LightningBoltIcon, SearchIcon, UserIcon } from "@heroicons/react/outline"
-import Image from "next/image"
-import HeaderItem from "./HeaderItem"
+import {
+  BadgeCheckIcon,
+  CollectionIcon,
+  HomeIcon,
+  LightningBoltIcon,
+  SearchIcon,
+  UserIcon,
+} from "@heroicons/react/outline";
+import Image from "next/image";
+import HeaderItem from "./HeaderItem";
 
 const Header = () => {
-    return (
-        <header className="flex flex-col sm:flex-row m-5 justify-between items-center h-auto">
-            <div className="flex flex-grow justify-evenly max-w-2xl">
-                <HeaderItem title="HOME" Icon={HomeIcon} />
-                <HeaderItem title="TRENDING" Icon={LightningBoltIcon} />
-                <HeaderItem title="VERIFIED" Icon={BadgeCheckIcon} />
-                <HeaderItem title="COLLECTIONS" Icon={CollectionIcon} />
-                <HeaderItem title="SEARCH" Icon={SearchIcon} />
-                <HeaderItem title="ACCOUNT" Icon={UserIcon} />
-            </div>
-            <Image 
-            className="object-contain"
-            src="https://links.papareact.com/ua6" width={200} height={100} />
-        </header>
-    )
-}
+  return (
+    <header className="flex flex-col sm:flex-row m-5 justify-between items-center h-auto">
+      <div className="flex flex-grow justify-evenly max-w-2xl">
+        <HeaderItem title="HOME" Icon={HomeIcon} />
+        <HeaderItem title="TRENDING" Icon={LightningBoltIcon} />
+        <HeaderItem title="VERIFIED" Icon={BadgeCheckIcon} />
+        <HeaderItem title="COLLECTIONS" Icon={CollectionIcon} />
+        <HeaderItem title="SEARCH" Icon={SearchIcon} />
+        <HeaderItem title="ACCOUNT" Icon={UserIcon} />
+      </div>
+      <Image
+        className="object-contain"
+        src="https://links.papareact.com/ua6"
+        width={200}
+        height={100}
+      />
+    </header>
+  );
+};
 
-export default Header
+export default Header;

components/HeaderItem.js

@@ -1,10 +1,12 @@
-const HeaderItem = ({Icon, title}) => {
-    return (
-        <div className="flex flex-col items-center cursor-pointer group w-12 sm:w-20 hover:text-white">
-            <Icon className="h-8 mb-1 group-hover:animate-bounce"/>
-            <p className="opacity-0 group-hover:opacity-100 tracking-widest">{title}</p>
-        </div>
-    )
-}
+const HeaderItem = ({ Icon, title }) => {
+  return (
+    <div className="flex flex-col items-center cursor-pointer group w-12 sm:w-20 hover:text-white">
+      <Icon className="h-8 mb-1 group-hover:animate-bounce" />
+      <p className="opacity-0 group-hover:opacity-100 tracking-widest">
+        {title}
+      </p>
+    </div>
+  );
+};
 
-export default HeaderItem
+export default HeaderItem;

components/Nav.js

@@ -0,0 +1,25 @@
+import requests from "../utils/requests";
+import { useRouter } from "next/router";
+
+const Nav = () => {
+  const router = useRouter();
+
+  return (
+    <nav className="relative">
+      <div className="flex px-10 sm:px-20 text-2xl whitespace-nowrap space-x-10 sm:space-x-20 overflow-x-scroll scrollbar-hide">
+        {Object.entries(requests).map(([key, { title, url }]) => (
+          <h2
+            key={key}
+            onClick={() => router.push(`/?genre=${key}`)}
+            className="last:pr-24 cursor-pointer transition duration-100 transform hover:scale-125 hover:text-white active:text-red-500"
+          >
+            {title}
+          </h2>
+        ))}
+      </div>
+      <div className="absolute top-0 right-0 bg-gradient-to-l from-[#06202A] h-10 w-1/12" />
+    </nav>
+  );
+};
+
+export default Nav;

next.config.js

@@ -1,5 +1,5 @@
 module.exports = {
-    images: {
-        domains: ["links.papareact.com", "image.tmdb.org"],
-    },
-};
+  images: {
+    domains: ["links.papareact.com", "image.tmdb.org"],
+  },
+};

package.json

@@ -14,6 +14,7 @@
     "postcss": "^8.2.10",
     "react": "17.0.2",
     "react-dom": "17.0.2",
+    "tailwind-scrollbar-hide": "^1.0.3",
     "tailwindcss": "^2.1.1"
   }
 }

pages/index.js

@@ -1,5 +1,6 @@
 import Head from 'next/head'
 import Header from '../components/Header'
+import Nav from '../components/Nav'
 
 export default function Home() {
   return (
@@ -9,10 +10,9 @@ export default function Home() {
         <link rel="icon" href="/favicon.ico" />
       </Head>
 
-      {/* Header */}
       <Header />
+      <Nav />
 
-      {/* Navbar  */}
       {/* Results  */}
     </div>
   )

tailwind.config.js

@@ -1,12 +1,12 @@
 module.exports = {
-  mode:'jit',
-  purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
+  mode: "jit",
+  purge: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
   darkMode: false, // or 'media' or 'class'
   theme: {
     extend: {},
   },
   variants: {
     extend: {},
   },
-  plugins: [],
-}
+  plugins: [require("tailwind-scrollbar-hide")],
+};

utils/requests.js

@@ -0,0 +1,48 @@
+const API_KEY = process.env.API_KEY;
+
+export default {
+  fetchTrending: {
+    title: "Trending",
+    url: `/trending/all/week?api_key=${API_KEY}&language=en-US`,
+  },
+  fetchTopRated: {
+    title: "Top Rated",
+    url: `/movie/top_rated?api_key=${API_KEY}&language=en-US`,
+  },
+  fetchActionMovies: {
+    title: "Action",
+    url: `/discover/movie?api_key=${API_KEY}&with_genres=28`,
+  },
+  fetchComedyMovies: {
+    title: "Comedy",
+    url: `/discover/movie?api_key=${API_KEY}&with_genres=35`,
+  },
+  fetchHorrorMovies: {
+    title: "Horror",
+    url: `/discover/movie?api_key=${API_KEY}&with_genres=27`,
+  },
+  fetchRomanceMovies: {
+    title: "Romance",
+    url: `/discover/movie?api_key=${API_KEY}&with_genres=10749`,
+  },
+  fetchMystery: {
+    title: "Mystery",
+    url: `/discover/movie?api_key=${API_KEY}&with_genres=9648`,
+  },
+  fetchSciFi: {
+    title: "Sci-Fi",
+    url: `/discover/movie?api_key=${API_KEY}&with_genres=878`,
+  },
+  fetchWestern: {
+    title: "Western",
+    url: `/discover/movie?api_key=${API_KEY}&with_genres=37`,
+  },
+  fetchAnimation: {
+    title: "Animation",
+    url: `/discover/movie?api_key=${API_KEY}&with_genres=16`,
+  },
+  fetchTV: {
+    title: "TV Movie",
+    url: `/discover/movie?api_key=${API_KEY}&with_genres=10770`,
+  },
+};

yarn.lock

@@ -2198,6 +2198,11 @@ supports-color@^8.0.0:
   dependencies:
     has-flag "^4.0.0"
 
+tailwind-scrollbar-hide@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/tailwind-scrollbar-hide/-/tailwind-scrollbar-hide-1.0.3.tgz#00d4851659389856bd3185d5e45bdf0462b4f166"
+  integrity sha512-BF+ITR3cJFFF8IP1B6snlZtwSJxwWIB030LX9ZGEITBfWiqn1V4rEJUF44HJH5w6hZBrqSlwJdhILya8OvWefg==
+
 tailwindcss@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-2.1.1.tgz#642f6038c9283a8e1454da34585b8b7c1a1e8877"