mirror of
https://github.com/JustAnimeCore/JustAnime.git
synced 2026-04-17 13:51:44 +00:00
cleaned home
This commit is contained in:
Tejas Panchal
@@ -11,6 +11,98 @@ import { Link, useNavigate } from "react-router-dom";
|
||||
import getSafeTitle from "@/src/utils/getSafetitle";
|
||||
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(
|
||||
({
|
||||
label,
|
||||
@@ -25,49 +117,29 @@ const CategoryCard = React.memo(
|
||||
const { language } = useLanguage();
|
||||
const navigate = useNavigate();
|
||||
|
||||
if (limit) {
|
||||
data = data.slice(0, limit);
|
||||
}
|
||||
const displayData = limit ? data.slice(0, limit) : data;
|
||||
|
||||
const [itemsToRender, setItemsToRender] = useState({
|
||||
firstRow: [],
|
||||
remainingItems: [],
|
||||
});
|
||||
|
||||
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 };
|
||||
const [itemsToRender, setItemsToRender] = useState(() => {
|
||||
if (categoryPage && window.innerWidth > 758 && displayData.length > 4) {
|
||||
return { firstRow: displayData.slice(0, 4), remainingItems: displayData.slice(4) };
|
||||
}
|
||||
return { firstRow: [], remainingItems: data.slice(0) };
|
||||
}, [categoryPage, data]);
|
||||
return { firstRow: [], remainingItems: displayData };
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
const handleResize = () => {
|
||||
setItemsToRender(getItemsToRender());
|
||||
};
|
||||
const newItems = getItemsToRender();
|
||||
setItemsToRender((prev) => {
|
||||
if (
|
||||
JSON.stringify(prev.firstRow) !== JSON.stringify(newItems.firstRow) ||
|
||||
JSON.stringify(prev.remainingItems) !==
|
||||
JSON.stringify(newItems.remainingItems)
|
||||
) {
|
||||
return newItems;
|
||||
if (categoryPage && window.innerWidth > 758 && displayData.length > 4) {
|
||||
setItemsToRender({ firstRow: displayData.slice(0, 4), remainingItems: displayData.slice(4) });
|
||||
} else {
|
||||
setItemsToRender({ firstRow: [], remainingItems: displayData });
|
||||
}
|
||||
return prev;
|
||||
});
|
||||
};
|
||||
|
||||
window.addEventListener("resize", handleResize);
|
||||
return () => {
|
||||
window.removeEventListener("resize", handleResize);
|
||||
};
|
||||
}, [getItemsToRender]);
|
||||
handleResize(); // Initial call to sync state
|
||||
|
||||
return () => window.removeEventListener("resize", handleResize);
|
||||
}, [categoryPage, displayData]);
|
||||
|
||||
return (
|
||||
<div className={`w-full ${className}`}>
|
||||
@@ -89,216 +161,29 @@ const CategoryCard = React.memo(
|
||||
)}
|
||||
</div>
|
||||
<>
|
||||
{categoryPage && (
|
||||
<div
|
||||
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"
|
||||
: ""
|
||||
}`}
|
||||
>
|
||||
{categoryPage && itemsToRender.firstRow.length > 0 && (
|
||||
<div className="grid grid-cols-4 gap-x-3 gap-y-8 transition-all duration-300 ease-in-out mt-8 max-[758px]:hidden">
|
||||
{itemsToRender.firstRow.map((item, index) => (
|
||||
<div
|
||||
<AnimeCard
|
||||
key={index}
|
||||
className="flex flex-col 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"
|
||||
/>
|
||||
<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>
|
||||
item={item}
|
||||
navigate={navigate}
|
||||
path={path}
|
||||
language={language}
|
||||
isFirstRow={true}
|
||||
/>
|
||||
))}
|
||||
</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`}>
|
||||
{itemsToRender.remainingItems.map((item, index) => (
|
||||
<div
|
||||
<AnimeCard
|
||||
key={index}
|
||||
className="flex flex-col transition-transform duration-300 ease-in-out"
|
||||
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"
|
||||
/>
|
||||
<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>
|
||||
item={item}
|
||||
navigate={navigate}
|
||||
path={path}
|
||||
language={language}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
|
||||
@@ -18,22 +18,20 @@ const ContinueWatching = () => {
|
||||
|
||||
useEffect(() => {
|
||||
const data = JSON.parse(localStorage.getItem("continueWatching") || "[]");
|
||||
setWatchList(data);
|
||||
setWatchList(data.reverse());
|
||||
}, []);
|
||||
|
||||
const memoizedWatchList = useMemo(() => watchList, [watchList]);
|
||||
|
||||
const removeFromWatchList = (episodeId) => {
|
||||
setWatchList((prevList) => {
|
||||
const updatedList = prevList.filter(
|
||||
(item) => item.episodeId !== episodeId
|
||||
);
|
||||
localStorage.setItem("continueWatching", JSON.stringify(updatedList));
|
||||
localStorage.setItem("continueWatching", JSON.stringify([...updatedList].reverse()));
|
||||
return updatedList;
|
||||
});
|
||||
};
|
||||
|
||||
if (memoizedWatchList.length === 0) return null;
|
||||
if (watchList.length === 0) return null;
|
||||
|
||||
return (
|
||||
<div className="mt-8">
|
||||
@@ -74,7 +72,7 @@ const ContinueWatching = () => {
|
||||
prevEl: ".continue-btn-prev",
|
||||
}}
|
||||
>
|
||||
{memoizedWatchList.slice().reverse().map((item, index) => (
|
||||
{watchList.map((item, index) => (
|
||||
<SwiperSlide
|
||||
key={index}
|
||||
className="text-center flex justify-center items-center"
|
||||
|
||||
@@ -6,18 +6,15 @@ function Genre({ data }) {
|
||||
|
||||
const scroll = (direction) => {
|
||||
if (scrollContainerRef.current) {
|
||||
const scrollAmount = direction === 'left' ? -300 : 300;
|
||||
scrollContainerRef.current.scrollBy({
|
||||
left: scrollAmount,
|
||||
left: direction === 'left' ? -300 : 300,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// Instant scroll on mount without animation
|
||||
useEffect(() => {
|
||||
if (scrollContainerRef.current) {
|
||||
// Direct manipulation of scrollLeft for instant scroll
|
||||
scrollContainerRef.current.scrollLeft = 300;
|
||||
}
|
||||
}, []);
|
||||
|
||||
@@ -24,39 +24,28 @@ const Schedule = () => {
|
||||
const month = currentDate.getMonth();
|
||||
const monthName = currentDate.toLocaleString("default", { month: "short" });
|
||||
const daysInMonth = new Date(year, month + 1, 0).getDate();
|
||||
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")}`;
|
||||
const months = [];
|
||||
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")}`;
|
||||
|
||||
useEffect(() => {
|
||||
const monthsArr = [];
|
||||
for (let day = 1; day <= daysInMonth; day++) {
|
||||
const date = new Date(year, month, day);
|
||||
const dayname = date.toLocaleString("default", { weekday: "short" });
|
||||
const yearr = date.getFullYear();
|
||||
const monthh = String(date.getMonth() + 1).padStart(2, "0");
|
||||
const dayy = String(date.getDate()).padStart(2, "0");
|
||||
const fulldate = `${yearr}-${monthh}-${dayy}`;
|
||||
months.push({ day, monthName, dayname, fulldate });
|
||||
monthsArr.push({
|
||||
day,
|
||||
monthName: date.toLocaleString("default", { month: "short" }),
|
||||
dayname: date.toLocaleString("default", { weekday: "short" }),
|
||||
fulldate: date.toISOString().split('T')[0]
|
||||
});
|
||||
}
|
||||
setDates(months);
|
||||
const timer = setInterval(() => {
|
||||
setCurrentTime(new Date());
|
||||
}, 1000);
|
||||
setDates(monthsArr);
|
||||
|
||||
const timer = setInterval(() => setCurrentTime(new Date()), 1000);
|
||||
return () => clearInterval(timer);
|
||||
}, []);
|
||||
}, [year, month, daysInMonth]);
|
||||
|
||||
useEffect(() => {
|
||||
const todayIndex = dates.findIndex(
|
||||
(date) =>
|
||||
date.fulldate ===
|
||||
`${currentDate.getFullYear()}-${String(
|
||||
currentDate.getMonth() + 1
|
||||
).padStart(2, "0")}-${String(currentDate.getDate()).padStart(2, "0")}`
|
||||
);
|
||||
const today = new Date().toISOString().split('T')[0];
|
||||
const todayIndex = dates.findIndex((date) => date.fulldate === today);
|
||||
|
||||
if (todayIndex !== -1) {
|
||||
setCurrentActiveIndex(todayIndex);
|
||||
@@ -150,21 +139,19 @@ const Schedule = () => {
|
||||
<div
|
||||
ref={(el) => (cardRefs.current[index] = el)}
|
||||
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 ${
|
||||
currentActiveIndex === index
|
||||
? "bg-white text-black"
|
||||
: "bg-zinc-800 text-white hover:bg-zinc-700"
|
||||
}`}
|
||||
className={`h-[60px] flex flex-col justify-center items-center w-full text-center rounded-lg cursor-pointer transition-all duration-200 ${currentActiveIndex === index
|
||||
? "bg-white text-black"
|
||||
: "bg-zinc-800 text-white hover:bg-zinc-700"
|
||||
}`}
|
||||
>
|
||||
<div className="text-[16px] font-bold max-[400px]:text-[14px] max-[350px]:text-[12px]">
|
||||
{date.dayname}
|
||||
</div>
|
||||
<div
|
||||
className={`text-[13px] max-[400px]:text-[11px] ${
|
||||
currentActiveIndex === index
|
||||
? "text-zinc-800"
|
||||
: "text-zinc-400"
|
||||
} max-[350px]:text-[10px]`}
|
||||
className={`text-[13px] max-[400px]:text-[11px] ${currentActiveIndex === index
|
||||
? "text-zinc-800"
|
||||
: "text-zinc-400"
|
||||
} max-[350px]:text-[10px]`}
|
||||
>
|
||||
{date.monthName} {date.day}
|
||||
</div>
|
||||
@@ -197,8 +184,8 @@ const Schedule = () => {
|
||||
{(showAll
|
||||
? scheduleData
|
||||
: Array.isArray(scheduleData)
|
||||
? scheduleData.slice(0, 7)
|
||||
: []
|
||||
? scheduleData.slice(0, 7)
|
||||
: []
|
||||
).map((item, idx) => (
|
||||
<Link
|
||||
to={`/${item.id}`}
|
||||
|
||||
@@ -20,13 +20,10 @@ import {
|
||||
|
||||
function Home() {
|
||||
const { homeInfo, homeInfoLoading, error } = useHomeInfo();
|
||||
const [itemLimit, setItemLimit] = useState(window.innerWidth > 1400 ? 10 : 12);
|
||||
const [itemLimit, setItemLimit] = useState(() => (window.innerWidth > 1400 ? 10 : 12));
|
||||
|
||||
useEffect(() => {
|
||||
const handleResize = () => {
|
||||
setItemLimit(window.innerWidth > 1400 ? 10 : 12);
|
||||
};
|
||||
|
||||
const handleResize = () => setItemLimit(window.innerWidth > 1400 ? 10 : 12);
|
||||
window.addEventListener("resize", handleResize);
|
||||
return () => window.removeEventListener("resize", handleResize);
|
||||
}, []);
|
||||
|
||||
Reference in New Issue
Block a user