Genres list (#10)

* profile-page

* GenresList Complete

* rework GenresList

* fix(home): genre list

---------

Co-authored-by: shifinmalik <[email protected]>
Co-authored-by: Muhammed-Rahif <[email protected]>

src/App.css

@@ -13,7 +13,7 @@
 
 html,
 body {
-  @apply h-full w-full bg-base-100;
+  @apply h-full w-full overflow-hidden bg-base-100;
 }
 
 .page {

src/components/Home/GenresList.tsx

@@ -0,0 +1,34 @@
+import { useState } from "react";
+
+function GenresList() {
+  const menu = [
+    { id: 1, name: "All" },
+    { id: 2, name: "Action" },
+    { id: 3, name: "Drama" },
+    { id: 4, name: "Movie" },
+    { id: 5, name: "Animation" },
+    { id: 6, name: "Romance" },
+    { id: 7, name: "Horror" },
+    { id: 8, name: "Adventure" },
+    { id: 9, name: "Fantasy" },
+    { id: 10, name: "Thriller" },
+  ];
+
+  const [active, setActive] = useState(menu[0].id);
+
+  return (
+    <div className="-ml-4 flex w-screen gap-2 overflow-y-hidden overflow-x-scroll px-4">
+      {menu.map(({ name, id }) => (
+        <p
+          key={id}
+          className={`m-0 flex cursor-pointer items-center border-l-primary px-1 leading-5 duration-300 ${active === id ? "scale-105 border-l-[3px]" : "text-gray-500"}`}
+          onClick={() => setActive(id)}
+        >
+          {name}
+        </p>
+      ))}
+    </div>
+  );
+}
+
+export default GenresList;

src/main.tsx

@@ -24,7 +24,7 @@ createRoot(document.getElementById("root")!).render(
       <QueryClientProvider client={queryClient}>
         <ThemeProvider value={theme}>{(<App />) as any}</ThemeProvider>
 
-        <ReactQueryDevtools buttonPosition="top-right" />
+        {/* <ReactQueryDevtools buttonPosition="top-right" /> */}
       </QueryClientProvider>
     </BrowserRouter>
   </React.StrictMode>,

src/pages/Home.tsx

@@ -1,17 +1,19 @@
-import Header from "../components/home/Header";
-import ActionMovies from "../components/home/ActionMovies"
-import AdventureMovie from "../components/home/AdventureMovie"
-import ComedyMovie from "../components/home/ComedyMovie"
-import CrimeMovie from "../components/home/CrimeMovie"
+import Header from "../components/Home/Header";
+import ActionMovies from "../components/Home/ActionMovies";
+import AdventureMovie from "../components/Home/AdventureMovie";
+import ComedyMovie from "../components/Home/ComedyMovie";
+import GenresList from "../components/Home/GenresList";
+import CrimeMovie from "../components/Home/CrimeMovie";
+
 export default function Home() {
   return (
-    <div id="home">
+    <div id="home" className="py-6">
       <Header />
-      <ActionMovies/>
-      <AdventureMovie/>
-      <ComedyMovie/>
-      <CrimeMovie/>
-
+      <GenresList />
+      <ActionMovies />
+      <AdventureMovie />
+      <ComedyMovie />
+      <CrimeMovie />
     </div>
   );
 }