mirror of
https://github.com/JustAnimeCore/JustAnime.git
synced 2026-04-17 22:01:45 +00:00
fixed genre
This commit is contained in:
Tejas Panchal
@@ -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 = [
|
||||
"#A4B389",
|
||||
"#FFBADE",
|
||||
"#935C5F",
|
||||
"#AD92BC",
|
||||
"#ABCCD8",
|
||||
"#D8B2AB",
|
||||
"#85E1CD",
|
||||
"#B7C996",
|
||||
];
|
||||
const scrollContainerRef = useRef(null);
|
||||
|
||||
const [showAll, setShowAll] = useState(false);
|
||||
const toggleGenres = () => {
|
||||
setShowAll((prev) => !prev);
|
||||
const scroll = (direction) => {
|
||||
if (scrollContainerRef.current) {
|
||||
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">
|
||||
<h1 className="font-bold text-2xl text-[#ffbade]">Genres</h1>
|
||||
<div className="bg-[#373646] py-6 px-4 mt-6 max-[478px]:bg-transparent max-[478px]:px-0">
|
||||
<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">
|
||||
{data &&
|
||||
(showAll ? data : data.slice(0, 24)).map((item, index) => {
|
||||
const textColor = colors[index % colors.length];
|
||||
return (
|
||||
<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]"
|
||||
style={{ color: textColor }}
|
||||
>
|
||||
<div className="overflow-hidden text-left text-ellipsis text-nowrap font-bold">
|
||||
{item.charAt(0).toUpperCase() + item.slice(1)}
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<button
|
||||
className="w-full bg-[#555462d3] py-3 mt-4 hover:bg-[#555462] rounded-md font-bold transform transition-all ease-out"
|
||||
onClick={toggleGenres}
|
||||
<div className="relative pt-[20px] max-sm:pt-[15px]">
|
||||
<div className="relative flex items-center min-h-[32px] max-sm:min-h-[28px]">
|
||||
{/* Content first for proper stacking */}
|
||||
<div
|
||||
ref={scrollContainerRef}
|
||||
className="absolute inset-0 overflow-x-auto no-scrollbar scroll-smooth"
|
||||
style={{
|
||||
msOverflowStyle: 'none',
|
||||
scrollbarWidth: 'none'
|
||||
}}
|
||||
>
|
||||
{showAll ? "Show less" : "Show more"}
|
||||
</button>
|
||||
<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="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"
|
||||
>
|
||||
<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
|
||||
onClick={() => scroll('left')}
|
||||
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="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>
|
||||
);
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user