fixed genre

src/components/genres/Genre.jsx

@@ -1,51 +1,82 @@
-import React, { useState } from "react";
+import React, { useRef, useEffect } from "react";
 import { Link } from "react-router-dom";
 
 function Genre({ data }) {
-  const colors = [
+  const scrollContainerRef = useRef(null);
-    "#A4B389",
-    "#FFBADE",
-    "#935C5F",
-    "#AD92BC",
-    "#ABCCD8",
-    "#D8B2AB",
-    "#85E1CD",
-    "#B7C996",
-  ];
 
-  const [showAll, setShowAll] = useState(false);
+  const scroll = (direction) => {
-  const toggleGenres = () => {
+    if (scrollContainerRef.current) {
-    setShowAll((prev) => !prev);
+      const scrollAmount = direction === 'left' ? -300 : 300;
+      scrollContainerRef.current.scrollBy({
+        left: scrollAmount,
+        behavior: 'smooth'
+      });
+    }
   };
 
+  // Instant scroll on mount without animation
+  useEffect(() => {
+    if (scrollContainerRef.current) {
+      // Direct manipulation of scrollLeft for instant scroll
+      scrollContainerRef.current.scrollLeft = 300;
+    }
+  }, []);
+
   return (
-    <div className="flex flex-col w-full">
+    <div className="relative pt-[20px] max-sm:pt-[15px]">
-      <h1 className="font-bold text-2xl text-[#ffbade]">Genres</h1>
+      <div className="relative flex items-center min-h-[32px] max-sm:min-h-[28px]">
-      <div className="bg-[#373646] py-6 px-4 mt-6 max-[478px]:bg-transparent max-[478px]:px-0">
+        {/* Content first for proper stacking */}
-        <div className="grid grid-cols-3 grid-rows-2 gap-x-4 gap-y-3 w-full max-[478px]:flex max-[478px]:flex-wrap max-[478px]:gap-2">
+        <div 
-          {data &&
+          ref={scrollContainerRef}
-            (showAll ? data : data.slice(0, 24)).map((item, index) => {
+          className="absolute inset-0 overflow-x-auto no-scrollbar scroll-smooth"
-              const textColor = colors[index % colors.length];
+          style={{
-              return (
+            msOverflowStyle: 'none',
+            scrollbarWidth: 'none'
+          }}
+        >
+          <div className="flex gap-2 h-8 max-sm:h-7 items-center min-w-max px-24 max-sm:px-16">
+            {data && data.map((item, index) => (
               <Link
                 to={`/genre/${item}`}
                 key={index}
-                  className="rounded-[4px] py-2 px-3 hover:bg-[#555462] hover:cursor-pointer max-[478px]:bg-[#373646] max-[478px]:py-[6px]"
+                className="px-3.5 max-sm:px-3 h-8 max-sm:h-7 flex items-center bg-[#1a1a1a] hover:bg-[#252525] rounded-[4px] transition-all duration-300 ease-in-out group"
-                  style={{ color: textColor }}
               >
-                  <div className="overflow-hidden text-left text-ellipsis text-nowrap font-bold">
+                <div className="text-white font-medium whitespace-nowrap text-[13px] max-sm:text-xs tracking-wide group-hover:text-white/90 transition-colors duration-300">
                   {item.charAt(0).toUpperCase() + item.slice(1)}
                 </div>
               </Link>
-              );
+            ))}
-            })}
           </div>
+        </div>
+
+        {/* Left button and gradient */}
+        <div className="relative z-20 flex items-center">
           <button 
-          className="w-full bg-[#555462d3] py-3 mt-4 hover:bg-[#555462] rounded-md font-bold transform transition-all ease-out"
+            onClick={() => scroll('left')}
-          onClick={toggleGenres}
+            className="bg-[#1a1a1a] hover:bg-[#252525] h-8 max-sm:h-7 w-8 max-sm:w-7 flex items-center justify-center rounded-[4px] transition-all duration-300 ease-in-out focus:outline-none active:scale-95"
           >
-          {showAll ? "Show less" : "Show more"}
+            <svg xmlns="http://www.w3.org/2000/svg" className="h-4 max-sm:h-3.5 w-4 max-sm:w-3.5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+            </svg>
           </button>
+          <div className="h-8 max-sm:h-7 w-20 max-sm:w-12 bg-gradient-to-r from-[#0a0a0a] via-[#0a0a0a]/80 to-transparent max-sm:from-[#0a0a0a]/60 max-sm:via-[#0a0a0a]/40 pointer-events-none"></div>
+        </div>
+
+        {/* Spacer for content */}
+        <div className="flex-1"></div>
+
+        {/* Right button and gradient */}
+        <div className="relative z-20 flex items-center">
+          <div className="h-8 max-sm:h-7 w-20 max-sm:w-12 bg-gradient-to-l from-[#0a0a0a] via-[#0a0a0a]/80 to-transparent max-sm:from-[#0a0a0a]/60 max-sm:via-[#0a0a0a]/40 pointer-events-none"></div>
+          <button 
+            onClick={() => scroll('right')}
+            className="bg-[#1a1a1a] hover:bg-[#252525] h-8 max-sm:h-7 w-8 max-sm:w-7 flex items-center justify-center rounded-[4px] transition-all duration-300 ease-in-out focus:outline-none active:scale-95"
+          >
+            <svg xmlns="http://www.w3.org/2000/svg" className="h-4 max-sm:h-3.5 w-4 max-sm:w-3.5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+            </svg>
+          </button>
+        </div>
       </div>
     </div>
   );

src/pages/Home/Home.jsx

@@ -20,6 +20,9 @@ function Home() {
     <>
       <div className="pt-16 px-4 w-full max-[1200px]:px-0">
         <Spotlight spotlights={homeInfo.spotlights} />
+        <div className="mt-6">
+          <Genre data={homeInfo.genres} />
+        </div>
         <ContinueWatching />
         <Trending trending={homeInfo.trending} />
         <div className="mt-10 flex gap-6 max-[1200px]:px-4 max-[1200px]:grid max-[1200px]:grid-cols-2 max-[1200px]:mt-12 max-[1200px]:gap-y-10 max-[680px]:grid-cols-1">
@@ -70,7 +73,6 @@ function Home() {
             />
           </div>
           <div className="w-full mt-[60px]">
-            <Genre data={homeInfo.genres} />
             <Topten data={homeInfo.topten} className={"mt-12"} />
           </div>
         </div>