Genres list

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,10 +1,9 @@
-import Header from "../components/home/Header";
+import GenresList from "../components/Home/GenresList";
 
 export default function Home() {
   return (
-    <div id="home">
-      <Header />
-
+    <div id="home" className="py-6">
+      <GenresList />
     </div>
   );
 }