shishantbiswas/JustAnime
1
0
Fork 0
mirror of https://github.com/JustAnimeCore/JustAnime.git synced 2026-04-17 13:51:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

cleaned home

Browse Source
This commit is contained in:
Tejas Panchal
2026-02-19 02:07:04 +05:30
parent a473595ed2
commit 09f2968684
5 changed files with 153 additions and 289 deletions
Download Patch File Download Diff File Expand all files Collapse all files

359
src/components/categorycard/CategoryCard.jsx
View File

@@ -11,6 +11,98 @@ import { Link, useNavigate } from "react-router-dom";
import getSafeTitle from "@/src/utils/getSafetitle"; import getSafeTitle from "@/src/utils/getSafetitle";
import "./CategoryCard.css"; import "./CategoryCard.css";
const AnimeCard = ({ item, navigate, path, language, isFirstRow = false }) => {
return (
<div
className={`flex flex-col ${!isFirstRow ? 'transition-transform duration-300 ease-in-out' : 'category-card-container'}`}
style={{ height: "fit-content" }}
>
<div className="w-full h-auto pb-[140%] relative inline-block overflow-hidden rounded-lg shadow-lg group">
<div
className="inline-block bg-gray-900 absolute left-0 top-0 w-full h-full group hover:cursor-pointer"
onClick={() =>
navigate(
`${path === "top-upcoming"
? `/${item.id}`
: `/watch/${item.id}`
}`
)
}
>
<img
src={`${item.poster}`}
alt={getSafeTitle(item.title, language, item.japanese_title)}
className="block w-full h-full object-cover transition-all duration-500 ease-in-out group-hover:scale-105 group-hover:blur-sm"
loading="lazy"
/>
<div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-all duration-300 flex items-center justify-center">
<div className="transform translate-y-4 group-hover:translate-y-0 transition-transform duration-300">
<FontAwesomeIcon
icon={faPlay}
className="text-[50px] text-white drop-shadow-lg max-[450px]:text-[36px]"
/>
</div>
</div>
</div>
{(item.tvInfo?.rating === "18+" || item?.adultContent === true) && (
<div className="text-white px-2 py-0.5 rounded-lg bg-red-600 absolute top-3 left-3 flex items-center justify-center text-[12px] font-bold">
18+
</div>
)}
<div className={`absolute bottom-0 left-0 right-0 ${isFirstRow ? 'p-3 pb-2' : 'p-2'} bg-gradient-to-t from-black/80 via-black/50 to-transparent`}>
<div className={`flex items-center justify-start w-full ${isFirstRow ? 'space-x-1.5' : 'space-x-1 max-[478px]:space-x-0.5'} z-[100] flex-wrap gap-y-1.5`}>
{item.tvInfo?.sub && (
<div className={`flex space-x-0.5 justify-center items-center bg-[#2a2a2a] rounded-[2px] ${isFirstRow ? 'px-2 py-1' : 'px-1.5 py-0.5 max-[478px]:px-1'} text-white`}>
<FontAwesomeIcon icon={faClosedCaptioning} className={isFirstRow ? 'text-[11px]' : 'text-[10px]'} />
<p className={`${isFirstRow ? 'text-[11px]' : 'text-[10px]'} font-medium`}>{item.tvInfo.sub}</p>
</div>
)}
{item.tvInfo?.dub && (
<div className={`flex space-x-0.5 justify-center items-center bg-[#2a2a2a] rounded-[2px] ${isFirstRow ? 'px-2 py-1' : 'px-1.5 py-0.5 max-[478px]:px-1'} text-white`}>
<FontAwesomeIcon icon={faMicrophone} className={isFirstRow ? 'text-[11px]' : 'text-[10px]'} />
<p className={`${isFirstRow ? 'text-[11px]' : 'text-[10px]'} font-medium`}>{item.tvInfo.dub}</p>
</div>
)}
{item.tvInfo?.showType && (
<div className={`bg-[#2a2a2a] text-white rounded-[2px] ${isFirstRow ? 'px-2 py-1 text-[11px]' : 'px-1.5 py-0.5 text-[10px] max-[478px]:hidden'} font-medium`}>
{item.tvInfo.showType.split(" ").shift()}
</div>
)}
{item.releaseDate && (
<div className={`bg-[#2a2a2a] text-white rounded-[2px] ${isFirstRow ? 'px-2 py-1 text-[11px]' : 'px-1.5 py-0.5 text-[10px]'} font-medium`}>
{item.releaseDate}
</div>
)}
{!item.tvInfo?.showType && item.type && (
<div className={`bg-[#2a2a2a] text-white rounded-[2px] ${isFirstRow ? 'px-2 py-1 text-[11px]' : 'px-1.5 py-0.5 text-[10px]'} font-medium`}>
{item.type}
</div>
)}
{(item.tvInfo?.duration || item.duration) && (
<div className={`bg-[#2a2a2a] text-white rounded-[2px] ${isFirstRow ? 'px-2 py-1 text-[11px]' : 'px-1.5 py-0.5 text-[10px] max-[478px]:hidden'} font-medium`}>
{item.tvInfo?.duration === "m" || item.tvInfo?.duration === "?" || item.duration === "m" || item.duration === "?"
? "N/A"
: item.tvInfo?.duration || item.duration || "N/A"}
</div>
)}
</div>
</div>
</div>
<Link
to={`/${item.id}`}
className="text-white font-semibold mt-3 item-title hover:text-white hover:cursor-pointer line-clamp-1"
>
{getSafeTitle(item.title, language, item.japanese_title)}
</Link>
{isFirstRow && item.description && (
<div className="line-clamp-3 text-[13px] font-light text-gray-400 mt-3 max-[1200px]:hidden">
{item.description}
</div>
)}
</div>
);
};
const CategoryCard = React.memo( const CategoryCard = React.memo(
({ ({
label, label,
@@ -25,49 +117,29 @@ const CategoryCard = React.memo(
const { language } = useLanguage(); const { language } = useLanguage();
const navigate = useNavigate(); const navigate = useNavigate();
if (limit) { const displayData = limit ? data.slice(0, limit) : data;
data = data.slice(0, limit);
}
const [itemsToRender, setItemsToRender] = useState({ const [itemsToRender, setItemsToRender] = useState(() => {
firstRow: [], if (categoryPage && window.innerWidth > 758 && displayData.length > 4) {
remainingItems: [], return { firstRow: displayData.slice(0, 4), remainingItems: displayData.slice(4) };
});
const getItemsToRender = useCallback(() => {
if (categoryPage) {
const firstRow =
window.innerWidth > 758 && data.length > 4 ? data.slice(0, 4) : [];
const remainingItems =
window.innerWidth > 758 && data.length > 4
? data.slice(4)
: data.slice(0);
return { firstRow, remainingItems };
} }
return { firstRow: [], remainingItems: data.slice(0) }; return { firstRow: [], remainingItems: displayData };
}, [categoryPage, data]); });
useEffect(() => { useEffect(() => {
const handleResize = () => { const handleResize = () => {
setItemsToRender(getItemsToRender()); if (categoryPage && window.innerWidth > 758 && displayData.length > 4) {
}; setItemsToRender({ firstRow: displayData.slice(0, 4), remainingItems: displayData.slice(4) });
const newItems = getItemsToRender(); } else {
setItemsToRender((prev) => { setItemsToRender({ firstRow: [], remainingItems: displayData });
if (
JSON.stringify(prev.firstRow) !== JSON.stringify(newItems.firstRow) ||
JSON.stringify(prev.remainingItems) !==
JSON.stringify(newItems.remainingItems)
) {
return newItems;
} }
return prev; };
});
window.addEventListener("resize", handleResize); window.addEventListener("resize", handleResize);
return () => { handleResize(); // Initial call to sync state
window.removeEventListener("resize", handleResize);
}; return () => window.removeEventListener("resize", handleResize);
}, [getItemsToRender]); }, [categoryPage, displayData]);
return ( return (
<div className={`w-full ${className}`}> <div className={`w-full ${className}`}>
@@ -89,216 +161,29 @@ const CategoryCard = React.memo(
)} )}
</div> </div>
<> <>
{categoryPage && ( {categoryPage && itemsToRender.firstRow.length > 0 && (
<div <div className="grid grid-cols-4 gap-x-3 gap-y-8 transition-all duration-300 ease-in-out mt-8 max-[758px]:hidden">
className={`grid grid-cols-4 gap-x-3 gap-y-8 transition-all duration-300 ease-in-out ${categoryPage && itemsToRender.firstRow.length > 0
? "mt-8 max-[758px]:hidden"
: ""
}`}
>
{itemsToRender.firstRow.map((item, index) => ( {itemsToRender.firstRow.map((item, index) => (
<div <AnimeCard
key={index} key={index}
className="flex flex-col category-card-container" item={item}
style={{ height: "fit-content" }} navigate={navigate}
> path={path}
<div className="w-full h-auto pb-[140%] relative inline-block overflow-hidden rounded-lg shadow-lg group"> language={language}
<div isFirstRow={true}
className="inline-block bg-gray-900 absolute left-0 top-0 w-full h-full group hover:cursor-pointer" />
onClick={() =>
navigate(
`${path === "top-upcoming"
? `/${item.id}`
: `/watch/${item.id}`
}`
)
}
>
<img
src={`${item.poster}`}
alt={getSafeTitle(item.title, language, item.japanese_title)}
className="block w-full h-full object-cover transition-all duration-500 ease-in-out group-hover:scale-105 group-hover:blur-sm"
/>
<div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-all duration-300 flex items-center justify-center">
<div className="transform translate-y-4 group-hover:translate-y-0 transition-transform duration-300">
<FontAwesomeIcon
icon={faPlay}
className="text-[50px] text-white drop-shadow-lg max-[450px]:text-[36px]"
/>
</div>
</div>
</div>
{(item.tvInfo?.rating === "18+" ||
item?.adultContent === true) && (
<div className="text-white px-2 py-0.5 rounded-lg bg-red-600 absolute top-3 left-3 flex items-center justify-center text-[12px] font-bold">
18+
</div>
)}
<div className="absolute bottom-0 left-0 right-0 p-3 pb-2 bg-gradient-to-t from-black/80 via-black/50 to-transparent">
<div className="flex items-center justify-start w-full space-x-1.5 z-[100] flex-wrap gap-y-1.5">
{item.tvInfo?.sub && (
<div className="flex space-x-0.5 justify-center items-center bg-[#2a2a2a] rounded-[2px] px-2 text-white py-1">
<FontAwesomeIcon
icon={faClosedCaptioning}
className="text-[11px]"
/>
<p className="text-[11px] font-medium">
{item.tvInfo.sub}
</p>
</div>
)}
{item.tvInfo?.dub && (
<div className="flex space-x-0.5 justify-center items-center bg-[#2a2a2a] rounded-[2px] px-2 text-white py-1">
<FontAwesomeIcon
icon={faMicrophone}
className="text-[11px]"
/>
<p className="text-[11px] font-medium">
{item.tvInfo.dub}
</p>
</div>
)}
{item.tvInfo?.showType && (
<div className="bg-[#2a2a2a] text-white rounded-[2px] px-2 py-1 text-[11px] font-medium">
{item.tvInfo.showType.split(" ").shift()}
</div>
)}
{item.releaseDate && (
<div className="bg-[#2a2a2a] text-white rounded-[2px] px-2 py-1 text-[11px] font-medium">
{item.releaseDate}
</div>
)}
{!item.tvInfo?.showType && item.type && (
<div className="bg-[#2a2a2a] text-white rounded-[2px] px-2 py-1 text-[11px] font-medium">
{item.type}
</div>
)}
{(item.tvInfo?.duration || item.duration) && (
<div className="bg-[#2a2a2a] text-white rounded-[2px] px-2 py-1 text-[11px] font-medium">
{item.tvInfo?.duration === "m" ||
item.tvInfo?.duration === "?" ||
item.duration === "m" ||
item.duration === "?"
? "N/A"
: item.tvInfo?.duration || item.duration || "N/A"}
</div>
)}
</div>
</div>
</div>
<Link
to={`/${item.id}`}
className="text-white font-semibold mt-3 item-title hover:text-white hover:cursor-pointer line-clamp-1"
>
{getSafeTitle(item.title, language, item.japanese_title)}
</Link>
{item.description && (
<div className="line-clamp-3 text-[13px] font-light text-gray-400 mt-3 max-[1200px]:hidden">
{item.description}
</div>
)}
</div>
))} ))}
</div> </div>
)} )}
<div className={`grid ${cardStyle || 'grid-cols-5 max-[1400px]:grid-cols-4 max-[758px]:grid-cols-3 max-[478px]:grid-cols-3'} gap-x-3 gap-y-8 mt-6 transition-all duration-300 ease-in-out max-[478px]:gap-x-2`}> <div className={`grid ${cardStyle || 'grid-cols-5 max-[1400px]:grid-cols-4 max-[758px]:grid-cols-3 max-[478px]:grid-cols-3'} gap-x-3 gap-y-8 mt-6 transition-all duration-300 ease-in-out max-[478px]:gap-x-2`}>
{itemsToRender.remainingItems.map((item, index) => ( {itemsToRender.remainingItems.map((item, index) => (
<div <AnimeCard
key={index} key={index}
className="flex flex-col transition-transform duration-300 ease-in-out" item={item}
style={{ height: "fit-content" }} navigate={navigate}
> path={path}
<div className="w-full h-auto pb-[140%] relative inline-block overflow-hidden rounded-lg shadow-lg group"> language={language}
<div />
className="inline-block bg-gray-900 absolute left-0 top-0 w-full h-full group hover:cursor-pointer"
onClick={() =>
navigate(
`${path === "top-upcoming"
? `/${item.id}`
: `/watch/${item.id}`
}`
)
}
>
<img
src={`${item.poster}`}
alt={getSafeTitle(item.title, language, item.japanese_title)}
className="block w-full h-full object-cover transition-all duration-500 ease-in-out group-hover:scale-105 group-hover:blur-sm"
/>
<div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-all duration-300 flex items-center justify-center">
<div className="transform translate-y-4 group-hover:translate-y-0 transition-transform duration-300">
<FontAwesomeIcon
icon={faPlay}
className="text-[50px] text-white drop-shadow-lg max-[450px]:text-[36px]"
/>
</div>
</div>
</div>
{(item.tvInfo?.rating === "18+" ||
item?.adultContent === true) && (
<div className="text-white px-2 py-0.5 rounded-lg bg-red-600 absolute top-3 left-3 flex items-center justify-center text-[12px] font-bold">
18+
</div>
)}
<div className="absolute bottom-0 left-0 right-0 p-2 bg-gradient-to-t from-black/80 via-black/50 to-transparent">
<div className="flex items-center justify-start w-full space-x-1 max-[478px]:space-x-0.5 z-[100] flex-wrap gap-y-1">
{item.tvInfo?.sub && (
<div className="flex space-x-0.5 justify-center items-center bg-[#2a2a2a] rounded-[2px] px-1.5 text-white py-0.5 max-[478px]:py-0.5 max-[478px]:px-1">
<FontAwesomeIcon
icon={faClosedCaptioning}
className="text-[10px]"
/>
<p className="text-[10px] font-medium">
{item.tvInfo.sub}
</p>
</div>
)}
{item.tvInfo?.dub && (
<div className="flex space-x-0.5 justify-center items-center bg-[#2a2a2a] rounded-[2px] px-1.5 text-white py-0.5 max-[478px]:py-0.5 max-[478px]:px-1">
<FontAwesomeIcon
icon={faMicrophone}
className="text-[10px]"
/>
<p className="text-[10px] font-medium">
{item.tvInfo.dub}
</p>
</div>
)}
{item.tvInfo?.showType && (
<div className="bg-[#2a2a2a] text-white rounded-[2px] px-1.5 py-0.5 text-[10px] font-medium max-[478px]:py-0.5 max-[478px]:px-1 max-[478px]:hidden">
{item.tvInfo.showType.split(" ").shift()}
</div>
)}
{item.releaseDate && (
<div className="bg-[#2a2a2a] text-white rounded-[2px] px-1.5 py-0.5 text-[10px] font-medium max-[478px]:py-0.5 max-[478px]:px-1">
{item.releaseDate}
</div>
)}
{!item.tvInfo?.showType && item.type && (
<div className="bg-[#2a2a2a] text-white rounded-[2px] px-1.5 py-0.5 text-[10px] font-medium max-[478px]:py-0.5 max-[478px]:px-1">
{item.type}
</div>
)}
{(item.tvInfo?.duration || item.duration) && (
<div className="bg-[#2a2a2a] text-white rounded-[2px] px-1.5 py-0.5 text-[10px] font-medium max-[478px]:py-0.5 max-[478px]:px-1 max-[478px]:hidden">
{item.tvInfo?.duration === "m" ||
item.tvInfo?.duration === "?" ||
item.duration === "m" ||
item.duration === "?"
? "N/A"
: item.tvInfo?.duration || item.duration || "N/A"}
</div>
)}
</div>
</div>
</div>
<Link
to={`/${item.id}`}
className="text-white font-semibold mt-3 item-title hover:text-white hover:cursor-pointer line-clamp-1"
>
{getSafeTitle(item.title, language, item.japanese_title)}
</Link>
</div>
))} ))}
</div> </div>
</> </>

10
src/components/continue/ContinueWatching.jsx
View File

@@ -18,22 +18,20 @@ const ContinueWatching = () => {
useEffect(() => { useEffect(() => {
const data = JSON.parse(localStorage.getItem("continueWatching") || "[]"); const data = JSON.parse(localStorage.getItem("continueWatching") || "[]");
setWatchList(data); setWatchList(data.reverse());
}, []); }, []);
const memoizedWatchList = useMemo(() => watchList, [watchList]);
const removeFromWatchList = (episodeId) => { const removeFromWatchList = (episodeId) => {
setWatchList((prevList) => { setWatchList((prevList) => {
const updatedList = prevList.filter( const updatedList = prevList.filter(
(item) => item.episodeId !== episodeId (item) => item.episodeId !== episodeId
); );
localStorage.setItem("continueWatching", JSON.stringify(updatedList)); localStorage.setItem("continueWatching", JSON.stringify([...updatedList].reverse()));
return updatedList; return updatedList;
}); });
}; };
if (memoizedWatchList.length === 0) return null; if (watchList.length === 0) return null;
return ( return (
<div className="mt-8"> <div className="mt-8">
@@ -74,7 +72,7 @@ const ContinueWatching = () => {
prevEl: ".continue-btn-prev", prevEl: ".continue-btn-prev",
}} }}
> >
{memoizedWatchList.slice().reverse().map((item, index) => ( {watchList.map((item, index) => (
<SwiperSlide <SwiperSlide
key={index} key={index}
className="text-center flex justify-center items-center" className="text-center flex justify-center items-center"

5
src/components/genres/Genre.jsx
View File

@@ -6,18 +6,15 @@ function Genre({ data }) {
const scroll = (direction) => { const scroll = (direction) => {
if (scrollContainerRef.current) { if (scrollContainerRef.current) {
const scrollAmount = direction === 'left' ? -300 : 300;
scrollContainerRef.current.scrollBy({ scrollContainerRef.current.scrollBy({
left: scrollAmount, left: direction === 'left' ? -300 : 300,
behavior: 'smooth' behavior: 'smooth'
}); });
} }
}; };
// Instant scroll on mount without animation
useEffect(() => { useEffect(() => {
if (scrollContainerRef.current) { if (scrollContainerRef.current) {
// Direct manipulation of scrollLeft for instant scroll
scrollContainerRef.current.scrollLeft = 300; scrollContainerRef.current.scrollLeft = 300;
} }
}, []); }, []);

61
src/components/schedule/Schedule.jsx
View File

@@ -24,39 +24,28 @@ const Schedule = () => {
const month = currentDate.getMonth(); const month = currentDate.getMonth();
const monthName = currentDate.toLocaleString("default", { month: "short" }); const monthName = currentDate.toLocaleString("default", { month: "short" });
const daysInMonth = new Date(year, month + 1, 0).getDate(); const daysInMonth = new Date(year, month + 1, 0).getDate();
const GMTOffset = `GMT ${ const GMTOffset = `GMT ${new Date().getTimezoneOffset() <= 0 ? "+" : "-"}${String(Math.floor(Math.abs(new Date().getTimezoneOffset()) / 60)).padStart(2, "0")}:${String(Math.abs(new Date().getTimezoneOffset()) % 60).padStart(2, "0")}`;
new Date().getTimezoneOffset() > 0 ? "-" : "+"
}${String(Math.floor(Math.abs(new Date().getTimezoneOffset()) / 60)).padStart(
2,
"0"
)}:${String(Math.abs(new Date().getTimezoneOffset()) % 60).padStart(2, "0")}`;
const months = [];
useEffect(() => { useEffect(() => {
const monthsArr = [];
for (let day = 1; day <= daysInMonth; day++) { for (let day = 1; day <= daysInMonth; day++) {
const date = new Date(year, month, day); const date = new Date(year, month, day);
const dayname = date.toLocaleString("default", { weekday: "short" }); monthsArr.push({
const yearr = date.getFullYear(); day,
const monthh = String(date.getMonth() + 1).padStart(2, "0"); monthName: date.toLocaleString("default", { month: "short" }),
const dayy = String(date.getDate()).padStart(2, "0"); dayname: date.toLocaleString("default", { weekday: "short" }),
const fulldate = `${yearr}-${monthh}-${dayy}`; fulldate: date.toISOString().split('T')[0]
months.push({ day, monthName, dayname, fulldate }); });
} }
setDates(months); setDates(monthsArr);
const timer = setInterval(() => {
setCurrentTime(new Date()); const timer = setInterval(() => setCurrentTime(new Date()), 1000);
}, 1000);
return () => clearInterval(timer); return () => clearInterval(timer);
}, []); }, [year, month, daysInMonth]);
useEffect(() => { useEffect(() => {
const todayIndex = dates.findIndex( const today = new Date().toISOString().split('T')[0];
(date) => const todayIndex = dates.findIndex((date) => date.fulldate === today);
date.fulldate ===
`${currentDate.getFullYear()}-${String(
currentDate.getMonth() + 1
).padStart(2, "0")}-${String(currentDate.getDate()).padStart(2, "0")}`
);
if (todayIndex !== -1) { if (todayIndex !== -1) {
setCurrentActiveIndex(todayIndex); setCurrentActiveIndex(todayIndex);
@@ -150,21 +139,19 @@ const Schedule = () => {
<div <div
ref={(el) => (cardRefs.current[index] = el)} ref={(el) => (cardRefs.current[index] = el)}
onClick={() => toggleActive(index)} onClick={() => toggleActive(index)}
className={`h-[60px] flex flex-col justify-center items-center w-full text-center rounded-lg cursor-pointer transition-all duration-200 ${ className={`h-[60px] flex flex-col justify-center items-center w-full text-center rounded-lg cursor-pointer transition-all duration-200 ${currentActiveIndex === index
currentActiveIndex === index ? "bg-white text-black"
? "bg-white text-black" : "bg-zinc-800 text-white hover:bg-zinc-700"
: "bg-zinc-800 text-white hover:bg-zinc-700" }`}
}`}
> >
<div className="text-[16px] font-bold max-[400px]:text-[14px] max-[350px]:text-[12px]"> <div className="text-[16px] font-bold max-[400px]:text-[14px] max-[350px]:text-[12px]">
{date.dayname} {date.dayname}
</div> </div>
<div <div
className={`text-[13px] max-[400px]:text-[11px] ${ className={`text-[13px] max-[400px]:text-[11px] ${currentActiveIndex === index
currentActiveIndex === index ? "text-zinc-800"
? "text-zinc-800" : "text-zinc-400"
: "text-zinc-400" } max-[350px]:text-[10px]`}
} max-[350px]:text-[10px]`}
> >
{date.monthName} {date.day} {date.monthName} {date.day}
</div> </div>
@@ -197,8 +184,8 @@ const Schedule = () => {
{(showAll {(showAll
? scheduleData ? scheduleData
: Array.isArray(scheduleData) : Array.isArray(scheduleData)
? scheduleData.slice(0, 7) ? scheduleData.slice(0, 7)
: [] : []
).map((item, idx) => ( ).map((item, idx) => (
<Link <Link
to={`/${item.id}`} to={`/${item.id}`}

7
src/pages/Home/Home.jsx
View File

@@ -20,13 +20,10 @@ import {
function Home() { function Home() {
const { homeInfo, homeInfoLoading, error } = useHomeInfo(); const { homeInfo, homeInfoLoading, error } = useHomeInfo();
const [itemLimit, setItemLimit] = useState(window.innerWidth > 1400 ? 10 : 12); const [itemLimit, setItemLimit] = useState(() => (window.innerWidth > 1400 ? 10 : 12));
useEffect(() => { useEffect(() => {
const handleResize = () => { const handleResize = () => setItemLimit(window.innerWidth > 1400 ? 10 : 12);
setItemLimit(window.innerWidth > 1400 ? 10 : 12);
};
window.addEventListener("resize", handleResize); window.addEventListener("resize", handleResize);
return () => window.removeEventListener("resize", handleResize); return () => window.removeEventListener("resize", handleResize);
}, []); }, []);