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

producer page

Browse Source
This commit is contained in:
Tejas Panchal
2025-08-10 12:41:27 +05:30
parent a73e9881a3
commit 11b90f5406
2 changed files with 58 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -176,7 +176,7 @@ const CategoryCard = React.memo(
</div> </div>
<Link <Link
to={`/${item.id}`} to={`/${item.id}`}
className="text-white font-semibold mt-3 item-title hover:text-[#FFBADE] hover:cursor-pointer line-clamp-1" className="text-white font-semibold mt-3 item-title hover:text-white hover:cursor-pointer line-clamp-1"
> >
{language === "EN" ? item.title : item.japanese_title} {language === "EN" ? item.title : item.japanese_title}
</Link> </Link>
@@ -269,7 +269,7 @@ const CategoryCard = React.memo(
</div> </div>
<Link <Link
to={`/${item.id}`} to={`/${item.id}`}
className="text-white font-semibold mt-3 item-title hover:text-[#FFBADE] hover:cursor-pointer line-clamp-1" className="text-white font-semibold mt-3 item-title hover:text-white hover:cursor-pointer line-clamp-1"
> >
{language === "EN" ? item.title : item.japanese_title} {language === "EN" ? item.title : item.japanese_title}
</Link> </Link>

97
src/components/producer/Producer.jsx
View File

@@ -1,14 +1,10 @@
import { useNavigate, useParams, useSearchParams } from "react-router-dom"; import { useNavigate, useParams, useSearchParams } from "react-router-dom";
import Error from "../error/Error"; import Error from "../error/Error";
import Topten from "../topten/Topten";
import Genre from "../genres/Genre";
import SidecardLoader from "../Loader/Sidecard.loader";
import PageSlider from "../pageslider/PageSlider";
import CategoryCard from "../categorycard/CategoryCard"; import CategoryCard from "../categorycard/CategoryCard";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { useHomeInfo } from "@/src/context/HomeInfoContext";
import getProducer from "@/src/utils/getProducer.utils"; import getProducer from "@/src/utils/getProducer.utils";
import Loader from "../Loader/Loader"; import Loader from "../Loader/Loader";
import PageSlider from "../pageslider/PageSlider";
function Producer() { function Producer() {
const { id } = useParams(); const { id } = useParams();
@@ -18,8 +14,8 @@ function Producer() {
const [error, setError] = useState(null); const [error, setError] = useState(null);
const [totalPages, setTotalPages] = useState(0); const [totalPages, setTotalPages] = useState(0);
const page = parseInt(searchParams.get("page")) || 1; const page = parseInt(searchParams.get("page")) || 1;
const { homeInfo, homeInfoLoading } = useHomeInfo();
const navigate = useNavigate(); const navigate = useNavigate();
useEffect(() => { useEffect(() => {
const fetchProducerInfo = async () => { const fetchProducerInfo = async () => {
setLoading(true); setLoading(true);
@@ -34,8 +30,9 @@ function Producer() {
} }
}; };
fetchProducerInfo(); fetchProducerInfo();
window.scrollTo(0, 0); window.scrollTo({ top: 0, behavior: 'smooth' });
}, [id, page]); }, [id, page]);
if (loading) return <Loader type="producer" />; if (loading) return <Loader type="producer" />;
if (error) { if (error) {
navigate("/error-page"); navigate("/error-page");
@@ -45,58 +42,68 @@ function Producer() {
navigate("/404-not-found-page"); navigate("/404-not-found-page");
return null; return null;
} }
const handlePageChange = (newPage) => { const handlePageChange = (newPage) => {
setSearchParams({ page: newPage }); setSearchParams({ page: newPage });
}; };
const producerName = (id.charAt(0).toUpperCase() + id.slice(1)).split("-").join(" ");
return ( return (
<div className="w-full flex flex-col gap-y-4 mt-[100px] max-md:mt-[50px]"> <div className="max-w-[1260px] mx-auto px-[15px] flex flex-col mt-[64px] max-md:mt-[50px]">
{producerInfo ? ( <div className="w-full flex flex-col gap-y-8 mt-6">
<div className="w-full px-4 grid grid-cols-[minmax(0,75%),minmax(0,25%)] gap-x-6 max-[1200px]:flex max-[1200px]:flex-col max-[1200px]:gap-y-10"> {loading ? (
{page > totalPages ? ( <Loader type="producer" />
<p className="font-bold text-2xl text-[#ffbade] max-[478px]:text-[18px] max-[300px]:leading-6"> ) : page > totalPages ? (
You came a long way, go back <br className="max-[300px]:hidden" /> <div className="flex flex-col gap-y-4">
nothing is here <h1 className="font-bold text-2xl text-white max-[478px]:text-[18px]">
{producerName} Anime
</h1>
<p className='text-white text-lg max-[478px]:text-[16px] max-[300px]:leading-6'>
You came a long way, go back <br className='max-[300px]:hidden' />nothing is here
</p> </p>
) : ( </div>
<div> ) : producerInfo && producerInfo.length > 0 ? (
{producerInfo && ( <div className="flex flex-col gap-y-2">
<CategoryCard <h1 className="font-bold text-2xl text-white max-[478px]:text-[18px]">
label={ {producerName} Anime
(id.charAt(0).toUpperCase() + id.slice(1)) </h1>
.split("-") <CategoryCard
.join(" ") + " Anime" data={producerInfo}
} showViewMore={false}
data={producerInfo} className="mt-0"
showViewMore={false} cardStyle="max-[1400px]:h-[35vw]"
className={"mt-0"} />
categoryPage={true} <div className="flex justify-center w-full mt-8">
/>
)}
<PageSlider <PageSlider
page={page} page={page}
totalPages={totalPages} totalPages={totalPages}
handlePageChange={handlePageChange} handlePageChange={handlePageChange}
/> />
</div> </div>
)}
<div className="w-full flex flex-col gap-y-10">
{homeInfoLoading ? (
<SidecardLoader />
) : (
<>
{homeInfo && homeInfo.topten && (
<Topten data={homeInfo.topten} className="mt-0" />
)}
{homeInfo?.genres && <Genre data={homeInfo.genres} />}
</>
)}
</div> </div>
</div> ) : error ? (
) : ( <div className="flex flex-col gap-y-4">
<Error /> <h1 className="font-bold text-2xl text-white max-[478px]:text-[18px]">
)} {producerName} Anime
</h1>
<p className='text-white text-lg max-[478px]:text-[16px]'>
Couldn't get results, please try again
</p>
</div>
) : (
<div className="flex flex-col gap-y-4">
<h1 className="font-bold text-2xl text-white max-[478px]:text-[18px]">
{producerName} Anime
</h1>
<p className='text-white text-lg max-[478px]:text-[16px]'>
No results found
</p>
</div>
)}
</div>
</div> </div>
); );
} }
export default Producer; export default Producer;