mirror of
https://github.com/JustAnimeCore/JustAnime.git
synced 2026-04-17 22:01:45 +00:00
info page in progress
This commit is contained in:
Tejas Panchal
@@ -19,9 +19,9 @@ import Voiceactor from "@/src/components/voiceactor/Voiceactor";
|
|||||||
function InfoItem({ label, value, isProducer = true }) {
|
function InfoItem({ label, value, isProducer = true }) {
|
||||||
return (
|
return (
|
||||||
value && (
|
value && (
|
||||||
<div className="text-[14px] font-bold">
|
<div className="text-[14px] font-medium transition-all duration-300">
|
||||||
{`${label}: `}
|
<span className="text-gray-400">{`${label}: `}</span>
|
||||||
<span className="font-light">
|
<span className="font-light text-white/90">
|
||||||
{Array.isArray(value) ? (
|
{Array.isArray(value) ? (
|
||||||
value.map((item, index) =>
|
value.map((item, index) =>
|
||||||
isProducer ? (
|
isProducer ? (
|
||||||
@@ -32,7 +32,7 @@ function InfoItem({ label, value, isProducer = true }) {
|
|||||||
.join("-")
|
.join("-")
|
||||||
.replace(/-+/g, "-")}`}
|
.replace(/-+/g, "-")}`}
|
||||||
key={index}
|
key={index}
|
||||||
className="cursor-pointer hover:text-[#ffbade]"
|
className="cursor-pointer transition-colors duration-300 hover:text-gray-300"
|
||||||
>
|
>
|
||||||
{item}
|
{item}
|
||||||
{index < value.length - 1 && ", "}
|
{index < value.length - 1 && ", "}
|
||||||
@@ -50,7 +50,7 @@ function InfoItem({ label, value, isProducer = true }) {
|
|||||||
.split(" ")
|
.split(" ")
|
||||||
.join("-")
|
.join("-")
|
||||||
.replace(/-+/g, "-")}`}
|
.replace(/-+/g, "-")}`}
|
||||||
className="cursor-pointer hover:text-[#ffbade]"
|
className="cursor-pointer transition-colors duration-300 hover:text-gray-300"
|
||||||
>
|
>
|
||||||
{value}
|
{value}
|
||||||
</Link>
|
</Link>
|
||||||
@@ -66,12 +66,9 @@ function InfoItem({ label, value, isProducer = true }) {
|
|||||||
function Tag({ bgColor, index, icon, text }) {
|
function Tag({ bgColor, index, icon, text }) {
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className={`flex space-x-1 justify-center items-center px-[4px] py-[1px] text-black font-bold text-[13px] ${
|
className={`flex space-x-1 justify-center items-center px-3 py-1 text-white backdrop-blur-md bg-white/10 font-medium text-[13px] rounded-full transition-all duration-300 hover:bg-white/20`}
|
||||||
index === 0 ? "rounded-l-[4px]" : "rounded-none"
|
|
||||||
}`}
|
|
||||||
style={{ backgroundColor: bgColor }}
|
|
||||||
>
|
>
|
||||||
{icon && <FontAwesomeIcon icon={icon} className="text-[12px]" />}
|
{icon && <FontAwesomeIcon icon={icon} className="text-[12px] mr-1" />}
|
||||||
<p className="text-[12px]">{text}</p>
|
<p className="text-[12px]">{text}</p>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
@@ -154,262 +151,218 @@ function AnimeInfo({ random = false }) {
|
|||||||
];
|
];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<div className="min-h-screen bg-[#0a0a0a] text-white">
|
||||||
<div className="relative grid grid-cols-[minmax(0,75%),minmax(0,25%)] h-fit w-full overflow-hidden text-white mt-[64px] max-[1200px]:flex max-[1200px]:flex-col max-md:mt-[50px]">
|
<div className="relative w-full overflow-hidden mt-[64px] max-md:mt-[50px]">
|
||||||
<img
|
{/* Background Image with Gradient Overlay */}
|
||||||
src={`${poster}`}
|
<div className="absolute inset-0 z-0">
|
||||||
alt={`${title} Poster`}
|
<img
|
||||||
className="absolute inset-0 object-cover w-full h-full filter grayscale blur-lg z-[-900]"
|
src={`${poster}`}
|
||||||
/>
|
alt={`${title} Background`}
|
||||||
<div className="flex items-start z-10 px-14 py-[70px] bg-[#252434] bg-opacity-70 gap-x-8 max-[1024px]:px-6 max-[1024px]:py-10 max-[1024px]:gap-x-4 max-[575px]:flex-col max-[575px]:items-center max-[575px]:justify-center">
|
className="w-full h-full object-cover filter blur-lg opacity-30"
|
||||||
<div className="relative w-[180px] h-[270px] max-[575px]:w-[140px] max-[575px]:h-[200px] flex-shrink-0">
|
/>
|
||||||
<img
|
<div className="absolute inset-0 bg-gradient-to-b from-[#121212]/80 via-[#121212]/95 to-[#121212]"></div>
|
||||||
src={`${poster}`}
|
</div>
|
||||||
alt={`${title} Poster`}
|
|
||||||
className="w-full h-full object-cover object-center flex-shrink-0"
|
{/* Main Content */}
|
||||||
/>
|
<div className="relative z-10 container mx-auto px-4 py-16">
|
||||||
{animeInfo.adultContent && (
|
<div className="flex flex-col lg:flex-row gap-8">
|
||||||
<div className="text-white px-2 rounded-md bg-[#FF5700] absolute top-2 left-2 flex items-center justify-center text-[14px] font-bold">
|
{/* Poster Section */}
|
||||||
18+
|
<div className="flex-shrink-0">
|
||||||
|
<div className="relative w-[220px] h-[330px] rounded-xl overflow-hidden shadow-2xl mx-auto lg:mx-0">
|
||||||
|
<img
|
||||||
|
src={`${poster}`}
|
||||||
|
alt={`${title} Poster`}
|
||||||
|
className="w-full h-full object-cover transition-transform duration-300 hover:scale-105"
|
||||||
|
/>
|
||||||
|
{animeInfo.adultContent && (
|
||||||
|
<div className="absolute top-3 left-3 px-3 py-1 bg-red-500/90 backdrop-blur-sm rounded-full text-sm font-semibold">
|
||||||
|
18+
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
)}
|
</div>
|
||||||
</div>
|
|
||||||
<div className="flex flex-col ml-4 gap-y-5 max-[575px]:items-center max-[575px]:justify-center max-[575px]:mt-6 max-[1200px]:ml-0">
|
{/* Info Section */}
|
||||||
<ul className="flex gap-x-2 items-center w-fit max-[1200px]:hidden">
|
<div className="flex-1 space-y-6">
|
||||||
{[
|
{/* Title */}
|
||||||
["Home", "home"],
|
<h1 className="text-4xl lg:text-5xl font-bold tracking-tight">
|
||||||
[info.tvInfo?.showType, info.tvInfo?.showType],
|
|
||||||
].map(([text, link], index) => (
|
|
||||||
<li key={index} className="flex gap-x-3 items-center">
|
|
||||||
<Link
|
|
||||||
to={`/${link}`}
|
|
||||||
className="text-white hover:text-[#FFBADE] text-[15px] font-semibold"
|
|
||||||
>
|
|
||||||
{text}
|
|
||||||
</Link>
|
|
||||||
<div className="dot mt-[1px] bg-white"></div>
|
|
||||||
</li>
|
|
||||||
))}
|
|
||||||
<p className="font-light text-[15px] text-gray-300 line-clamp-1 max-[575px]:leading-5">
|
|
||||||
{language === "EN" ? title : japanese_title}
|
{language === "EN" ? title : japanese_title}
|
||||||
</p>
|
</h1>
|
||||||
</ul>
|
|
||||||
<h1 className="text-4xl font-semibold max-[1200px]:text-3xl max-[575px]:text-2xl max-[575px]:text-center max-[575px]:leading-7">
|
{/* Tags */}
|
||||||
{language === "EN" ? title : japanese_title}
|
<div className="flex flex-wrap gap-2">
|
||||||
</h1>
|
{tags.map(({ condition, icon, text }, index) =>
|
||||||
<div className="flex flex-wrap w-fit gap-x-[2px] mt-3 max-[575px]:mx-auto max-[575px]:mt-0 gap-y-[3px] max-[320px]:justify-center">
|
|
||||||
{tags.map(
|
|
||||||
({ condition, icon, bgColor, text }, index) =>
|
|
||||||
condition && (
|
condition && (
|
||||||
<Tag
|
<Tag
|
||||||
key={index}
|
key={index}
|
||||||
index={index}
|
index={index}
|
||||||
bgColor={bgColor}
|
|
||||||
icon={icon}
|
icon={icon}
|
||||||
text={text}
|
text={text}
|
||||||
/>
|
/>
|
||||||
)
|
)
|
||||||
)}
|
|
||||||
<div className="flex w-fit items-center ml-1">
|
|
||||||
{[info.tvInfo?.showType, info.tvInfo?.duration].map(
|
|
||||||
(item, index) =>
|
|
||||||
item && (
|
|
||||||
<div
|
|
||||||
key={index}
|
|
||||||
className="px-1 h-fit flex items-center gap-x-2 w-fit"
|
|
||||||
>
|
|
||||||
<div className="dot mt-[2px]"></div>
|
|
||||||
<p className="text-[14px]">{item}</p>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
{animeInfo?.animeInfo?.Status?.toLowerCase() !== "not-yet-aired" ? (
|
{/* Details Section */}
|
||||||
<Link
|
<div className="space-y-3 py-4 backdrop-blur-md bg-white/5 rounded-xl px-6">
|
||||||
to={`/watch/${animeInfo.id}`}
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
className="flex gap-x-2 px-6 py-2 bg-[#FFBADE] w-fit text-black items-center rounded-3xl mt-5"
|
{[
|
||||||
>
|
{ label: "Japanese", value: info?.Japanese },
|
||||||
<FontAwesomeIcon
|
{ label: "Synonyms", value: info?.Synonyms },
|
||||||
icon={faPlay}
|
{ label: "Aired", value: info?.Aired },
|
||||||
className="text-[14px] mt-[1px]"
|
{ label: "Premiered", value: info?.Premiered },
|
||||||
/>
|
{ label: "Duration", value: info?.Duration },
|
||||||
<p className="text-lg font-medium">Watch Now</p>
|
{ label: "Status", value: info?.Status },
|
||||||
</Link>
|
{ label: "MAL Score", value: info?.["MAL Score"] },
|
||||||
) : (
|
].map((item, index) => (
|
||||||
<div className="flex gap-x-2 px-6 py-2 bg-[#FFBADE] w-fit text-black items-center rounded-3xl mt-5">
|
<InfoItem
|
||||||
<p className="text-lg font-medium">Not released</p>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{info?.Overview && (
|
|
||||||
<div className="text-[14px] mt-2 max-[575px]:hidden">
|
|
||||||
{info.Overview.length > 270 ? (
|
|
||||||
<>
|
|
||||||
{isFull
|
|
||||||
? info.Overview
|
|
||||||
: `${info.Overview.slice(0, 270)}...`}
|
|
||||||
<span
|
|
||||||
className="text-[13px] font-bold hover:cursor-pointer"
|
|
||||||
onClick={() => setIsFull(!isFull)}
|
|
||||||
>
|
|
||||||
{isFull ? "- Less" : "+ More"}
|
|
||||||
</span>
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
info.Overview
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
<p className="text-[14px] max-[575px]:hidden">
|
|
||||||
{`${website_name} is the best site to watch `}
|
|
||||||
<span className="font-bold">{title}</span>
|
|
||||||
{` SUB online, or you can even watch `}
|
|
||||||
<span className="font-bold">{title}</span>
|
|
||||||
{` DUB in HD quality.`}
|
|
||||||
</p>
|
|
||||||
<div className="flex gap-x-4 items-center mt-4 max-[575px]:w-full max-[575px]:justify-center max-[320px]:hidden">
|
|
||||||
<img
|
|
||||||
src="https://i.postimg.cc/d34WWyNQ/share-icon.gif"
|
|
||||||
alt="Share Anime"
|
|
||||||
className="w-[60px] h-auto rounded-full max-[1024px]:w-[40px]"
|
|
||||||
/>
|
|
||||||
<div className="flex flex-col w-fit">
|
|
||||||
<p className="text-[15px] font-bold text-[#FFBADE]">
|
|
||||||
Share Anime
|
|
||||||
</p>
|
|
||||||
<p className="text-[16px] text-white">to your friends</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="bg-[#4c4b57c3] flex items-center px-8 max-[1200px]:py-10 max-[1200px]:bg-[#363544e0] max-[575px]:p-4">
|
|
||||||
<div className="w-full flex flex-col h-fit gap-y-3">
|
|
||||||
{info?.Overview && (
|
|
||||||
<div className="custom-xl:hidden max-h-[150px] overflow-hidden">
|
|
||||||
<p className="text-[13px] font-bold">Overview:</p>
|
|
||||||
<div className="max-h-[110px] mt-2 overflow-y-scroll">
|
|
||||||
<p className="text-[14px] font-light">{info.Overview}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{[
|
|
||||||
{ label: "Japanese", value: info?.Japanese },
|
|
||||||
{ label: "Synonyms", value: info?.Synonyms },
|
|
||||||
{ label: "Aired", value: info?.Aired },
|
|
||||||
{ label: "Premiered", value: info?.Premiered },
|
|
||||||
{ label: "Duration", value: info?.Duration },
|
|
||||||
{ label: "Status", value: info?.Status },
|
|
||||||
{ label: "MAL Score", value: info?.["MAL Score"] },
|
|
||||||
].map(({ label, value }, index) => (
|
|
||||||
<InfoItem
|
|
||||||
key={index}
|
|
||||||
label={label}
|
|
||||||
value={value}
|
|
||||||
isProducer={false}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
{info?.Genres && (
|
|
||||||
<div className="flex gap-x-2 py-2 custom-xl:border-t custom-xl:border-b custom-xl:border-white/20 max-[1200px]:border-none">
|
|
||||||
<p>Genres:</p>
|
|
||||||
<div className="flex flex-wrap gap-2">
|
|
||||||
{info.Genres.map((genre, index) => (
|
|
||||||
<Link
|
|
||||||
to={`/genre/${genre.split(" ").join("-")}`}
|
|
||||||
key={index}
|
key={index}
|
||||||
className="text-[14px] font-semibold px-2 py-[1px] border border-gray-400 rounded-2xl hover:text-[#ffbade]"
|
label={item.label}
|
||||||
>
|
value={item.value}
|
||||||
{genre}
|
isProducer={false}
|
||||||
</Link>
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Genres */}
|
||||||
|
{info?.Genres && (
|
||||||
|
<div className="pt-4 border-t border-white/10">
|
||||||
|
<p className="text-gray-400 mb-2">Genres</p>
|
||||||
|
<div className="flex flex-wrap gap-2">
|
||||||
|
{info.Genres.map((genre, index) => (
|
||||||
|
<Link
|
||||||
|
to={`/genre/${genre.split(" ").join("-")}`}
|
||||||
|
key={index}
|
||||||
|
className="px-3 py-1 text-sm bg-white/5 rounded-full hover:bg-white/10 transition-colors"
|
||||||
|
>
|
||||||
|
{genre}
|
||||||
|
</Link>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Studios & Producers */}
|
||||||
|
<div className="space-y-4 pt-4 border-t border-white/10">
|
||||||
|
{[
|
||||||
|
{ label: "Studios", value: info?.Studios },
|
||||||
|
{ label: "Producers", value: info?.Producers },
|
||||||
|
].map((item, index) => (
|
||||||
|
<InfoItem
|
||||||
|
key={index}
|
||||||
|
label={item.label}
|
||||||
|
value={item.value}
|
||||||
|
/>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
|
||||||
{[
|
{/* Watch Button */}
|
||||||
{ label: "Studios", value: info?.Studios },
|
{animeInfo?.animeInfo?.Status?.toLowerCase() !== "not-yet-aired" ? (
|
||||||
{ label: "Producers", value: info?.Producers },
|
<Link
|
||||||
].map(({ label, value }, index) => (
|
to={`/watch/${animeInfo.id}`}
|
||||||
<InfoItem key={index} label={label} value={value} />
|
className="inline-flex items-center px-6 py-3 bg-white/10 backdrop-blur-md rounded-full text-white transition-all duration-300 hover:bg-white/20 hover:scale-105 group"
|
||||||
))}
|
>
|
||||||
<p className="text-[14px] mt-4 custom-xl:hidden">
|
<FontAwesomeIcon
|
||||||
{`${website_name} is the best site to watch `}
|
icon={faPlay}
|
||||||
<span className="font-bold">{title}</span>
|
className="mr-2 text-sm group-hover:text-white"
|
||||||
{` SUB online, or you can even watch `}
|
/>
|
||||||
<span className="font-bold">{title}</span>
|
<span className="font-medium">Watch Now</span>
|
||||||
{` DUB in HD quality.`}
|
</Link>
|
||||||
</p>
|
) : (
|
||||||
|
<div className="inline-flex items-center px-6 py-3 bg-gray-700/50 rounded-full">
|
||||||
|
<span className="font-medium">Not released</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Overview */}
|
||||||
|
{info?.Overview && (
|
||||||
|
<div className="text-gray-300 leading-relaxed max-w-3xl">
|
||||||
|
{info.Overview.length > 270 ? (
|
||||||
|
<>
|
||||||
|
{isFull
|
||||||
|
? info.Overview
|
||||||
|
: `${info.Overview.slice(0, 270)}...`}
|
||||||
|
<button
|
||||||
|
className="ml-2 text-white/70 hover:text-white transition-colors text-sm font-medium"
|
||||||
|
onClick={() => setIsFull(!isFull)}
|
||||||
|
>
|
||||||
|
{isFull ? "Show Less" : "Read More"}
|
||||||
|
</button>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
info.Overview
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Share Section */}
|
||||||
|
<div className="flex items-center space-x-4 pt-4">
|
||||||
|
<img
|
||||||
|
src="https://media.tenor.com/hJfxLKzDUFcAAAAM/bleach-best-anime.gif"
|
||||||
|
alt="Share Anime"
|
||||||
|
className="w-12 h-12 rounded-full"
|
||||||
|
/>
|
||||||
|
<div>
|
||||||
|
<p className="text-sm font-semibold text-white/70">Share Anime</p>
|
||||||
|
<p className="text-white/50">with your friends</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="w-full px-4 grid grid-cols-[minmax(0,75%),minmax(0,25%)] gap-x-6 max-[1200px]:flex flex-col">
|
|
||||||
<div>
|
{/* Seasons Section */}
|
||||||
{seasons?.length > 0 && (
|
{seasons?.length > 0 && (
|
||||||
<div className="flex flex-col gap-y-7 mt-8">
|
<div className="container mx-auto px-4 py-12">
|
||||||
<h1 className="w-fit text-2xl text-[#ffbade] max-[478px]:text-[18px] font-bold">
|
<h2 className="text-2xl font-bold mb-8">More Seasons</h2>
|
||||||
More Seasons
|
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
|
||||||
</h1>
|
{seasons.map((season, index) => (
|
||||||
<div className="flex flex-wrap gap-4 max-[575px]:grid max-[575px]:grid-cols-3 max-[575px]:gap-3 max-[480px]:grid-cols-2">
|
<Link
|
||||||
{seasons.map((season, index) => (
|
to={`/${season.id}`}
|
||||||
<Link
|
key={index}
|
||||||
to={`/${season.id}`}
|
className={`relative aspect-video rounded-xl overflow-hidden group ${
|
||||||
key={index}
|
currentId === String(season.id)
|
||||||
className={`relative w-[20%] h-[60px] rounded-lg overflow-hidden cursor-pointer group ${
|
? "ring-2 ring-white/20"
|
||||||
currentId === String(season.id)
|
: ""
|
||||||
? "border border-[#ffbade]"
|
}`}
|
||||||
: ""
|
>
|
||||||
} max-[1200px]:w-[140px] max-[575px]:w-full`}
|
<img
|
||||||
>
|
src={season.season_poster}
|
||||||
<p
|
alt={season.season}
|
||||||
className={`text-[13px] text-center font-bold absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-full px-2 z-30 line-clamp-2 group-hover:text-[#ffbade] ${
|
className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"
|
||||||
currentId === String(season.id)
|
/>
|
||||||
? "text-[#ffbade]"
|
<div className="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent flex items-end p-4">
|
||||||
: "text-white"
|
<p className="text-sm font-medium line-clamp-2">
|
||||||
}`}
|
{season.season}
|
||||||
>
|
</p>
|
||||||
{season.season}
|
</div>
|
||||||
</p>
|
</Link>
|
||||||
<div className="absolute inset-0 z-10 bg-[url('https://i.postimg.cc/pVGY6RXd/thumb.png')] bg-repeat"></div>
|
))}
|
||||||
<img
|
</div>
|
||||||
src={season.season_poster}
|
|
||||||
alt=""
|
|
||||||
className="w-full h-full object-cover blur-[3px] opacity-50"
|
|
||||||
/>
|
|
||||||
</Link>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{animeInfo?.charactersVoiceActors.length > 0 && (
|
|
||||||
<Voiceactor animeInfo={animeInfo} />
|
|
||||||
)}
|
|
||||||
{animeInfo.recommended_data.length > 0 && (
|
|
||||||
<CategoryCard
|
|
||||||
label="Recommended for you"
|
|
||||||
data={animeInfo.recommended_data}
|
|
||||||
limit={animeInfo.recommended_data.length}
|
|
||||||
showViewMore={false}
|
|
||||||
className={"mt-8"}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
<div>
|
)}
|
||||||
{animeInfo.related_data.length > 0 && (
|
|
||||||
<Sidecard
|
{/* Voice Actors Section */}
|
||||||
label="Related Anime"
|
{animeInfo?.charactersVoiceActors.length > 0 && (
|
||||||
data={animeInfo.related_data}
|
<div className="container mx-auto px-4 py-12">
|
||||||
className="mt-8"
|
<Voiceactor animeInfo={animeInfo} />
|
||||||
/>
|
|
||||||
)}
|
|
||||||
{homeInfo && homeInfo.most_popular && (
|
|
||||||
<Sidecard
|
|
||||||
label="Most Popular"
|
|
||||||
data={homeInfo.most_popular.slice(0, 10)}
|
|
||||||
className="mt-[40px]"
|
|
||||||
limit={10}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
)}
|
||||||
</>
|
|
||||||
|
{/* Recommendations Section */}
|
||||||
|
{animeInfo.recommended_data.length > 0 && (
|
||||||
|
<div className="container mx-auto px-4 py-12">
|
||||||
|
<CategoryCard
|
||||||
|
label="Recommended for you"
|
||||||
|
data={animeInfo.recommended_data}
|
||||||
|
limit={animeInfo.recommended_data.length}
|
||||||
|
showViewMore={false}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -53,7 +53,7 @@ function Category({ path, label }) {
|
|||||||
<div className="w-full flex flex-col gap-y-4 mt-[64px] max-md:mt-[50px]">
|
<div className="w-full flex flex-col gap-y-4 mt-[64px] max-md:mt-[50px]">
|
||||||
<div className="w-full flex gap-x-4 items-center bg-[#191826] p-5 max-[575px]:px-3 max-[320px]:hidden">
|
<div className="w-full flex gap-x-4 items-center bg-[#191826] p-5 max-[575px]:px-3 max-[320px]:hidden">
|
||||||
<img
|
<img
|
||||||
src="https://i.postimg.cc/d34WWyNQ/share-icon.gif"
|
src="https://media.tenor.com/hJfxLKzDUFcAAAAM/bleach-best-anime.gif"
|
||||||
alt="Share Anime"
|
alt="Share Anime"
|
||||||
className="w-[60px] h-auto rounded-full max-[1024px]:w-[40px] max-[575px]:hidden"
|
className="w-[60px] h-auto rounded-full max-[1024px]:w-[40px] max-[575px]:hidden"
|
||||||
/>
|
/>
|
||||||
|
|||||||
@@ -491,7 +491,7 @@ export default function Watch() {
|
|||||||
</div>
|
</div>
|
||||||
<div className="w-full flex gap-x-4 items-center bg-[#191826] p-5 max-[575px]:px-3 max-[320px]:hidden">
|
<div className="w-full flex gap-x-4 items-center bg-[#191826] p-5 max-[575px]:px-3 max-[320px]:hidden">
|
||||||
<img
|
<img
|
||||||
src="https://i.postimg.cc/d34WWyNQ/share-icon.gif"
|
src="https://media.tenor.com/hJfxLKzDUFcAAAAM/bleach-best-anime.gif"
|
||||||
alt="Share Anime"
|
alt="Share Anime"
|
||||||
className="w-[60px] h-auto rounded-full max-[1024px]:w-[40px] max-[575px]:hidden"
|
className="w-[60px] h-auto rounded-full max-[1024px]:w-[40px] max-[575px]:hidden"
|
||||||
/>
|
/>
|
||||||
|
|||||||
Reference in New Issue
Block a user