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

infoPageDone

Browse Source
This commit is contained in:
Tejas Panchal
2025-07-29 19:21:08 +05:30
parent dc6f37da0c
commit 9de49d8ba5
1 changed files with 274 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

254
src/pages/animeInfo/AnimeInfo.jsx
View File

@@ -19,7 +19,7 @@ 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-medium transition-all duration-300"> <div className="text-[11px] sm:text-[14px] font-medium transition-all duration-300">
<span className="text-gray-400">{`${label}: `}</span> <span className="text-gray-400">{`${label}: `}</span>
<span className="font-light text-white/90"> <span className="font-light text-white/90">
{Array.isArray(value) ? ( {Array.isArray(value) ? (
@@ -38,8 +38,9 @@ function InfoItem({ label, value, isProducer = true }) {
{index < value.length - 1 && ", "} {index < value.length - 1 && ", "}
</Link> </Link>
) : ( ) : (
<span key={index} className="cursor-pointer"> <span key={index}>
{item} {item}
{index < value.length - 1 && ", "}
</span> </span>
) )
) )
@@ -55,7 +56,7 @@ function InfoItem({ label, value, isProducer = true }) {
{value} {value}
</Link> </Link>
) : ( ) : (
<span className="cursor-pointer">{value}</span> <span>{value}</span>
)} )}
</span> </span>
</div> </div>
@@ -66,10 +67,10 @@ 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-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`} className="flex space-x-1 justify-center items-center px-2 sm:px-3 py-0.5 sm:py-1 text-white backdrop-blur-md bg-white/10 font-medium text-[10px] sm:text-[13px] rounded-md sm:rounded-full transition-all duration-300 hover:bg-white/20"
> >
{icon && <FontAwesomeIcon icon={icon} className="text-[12px] mr-1" />} {icon && <FontAwesomeIcon icon={icon} className="text-[10px] sm:text-[12px] mr-1" />}
<p className="text-[12px]">{text}</p> <p className="text-[10px] sm:text-[12px]">{text}</p>
</div> </div>
); );
} }
@@ -153,44 +154,42 @@ function AnimeInfo({ random = false }) {
return ( return (
<div className="min-h-screen bg-[#0a0a0a] text-white"> <div className="min-h-screen bg-[#0a0a0a] text-white">
<div className="relative w-full overflow-hidden mt-[64px] max-md:mt-[50px]"> <div className="relative w-full overflow-hidden mt-[64px] max-md:mt-[50px]">
{/* Background Image with Gradient Overlay */}
<div className="absolute inset-0 z-0">
<img
src={`${poster}`}
alt={`${title} Background`}
className="w-full h-full object-cover filter blur-lg opacity-30"
/>
<div className="absolute inset-0 bg-gradient-to-b from-[#121212]/80 via-[#121212]/95 to-[#121212]"></div>
</div>
{/* Main Content */} {/* Main Content */}
<div className="relative z-10 container mx-auto px-4 py-16"> <div className="relative z-10 container mx-auto px-3 sm:px-4 py-4 sm:py-6 lg:py-12">
<div className="flex flex-col lg:flex-row gap-8"> {/* Mobile Layout */}
<div className="block md:hidden">
<div className="flex flex-row gap-4">
{/* Poster Section */} {/* Poster Section */}
<div className="flex-shrink-0"> <div className="flex-shrink-0">
<div className="relative w-[220px] h-[330px] rounded-xl overflow-hidden shadow-2xl mx-auto lg:mx-0"> <div className="relative w-[130px] xs:w-[150px] aspect-[2/3] rounded-xl overflow-hidden shadow-[0_8px_32px_rgba(0,0,0,0.3)]">
<img <img
src={`${poster}`} src={`${poster}`}
alt={`${title} Poster`} alt={`${title} Poster`}
className="w-full h-full object-cover transition-transform duration-300 hover:scale-105" className="w-full h-full object-cover"
/> />
{animeInfo.adultContent && ( {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"> <div className="absolute top-2 left-2 px-2 py-0.5 bg-red-500/90 backdrop-blur-sm rounded-md text-[10px] font-medium">
18+ 18+
</div> </div>
)} )}
</div> </div>
</div> </div>
{/* Info Section */} {/* Basic Info Section */}
<div className="flex-1 space-y-6"> <div className="flex-1 min-w-0 space-y-2">
{/* Title */} {/* Title */}
<h1 className="text-4xl lg:text-5xl font-bold tracking-tight"> <div className="space-y-0.5">
<h1 className="text-lg xs:text-xl font-bold tracking-tight truncate">
{language === "EN" ? title : japanese_title} {language === "EN" ? title : japanese_title}
</h1> </h1>
{language === "EN" && japanese_title && (
<p className="text-white/50 text-[11px] xs:text-xs truncate">JP Title: {japanese_title}</p>
)}
</div>
{/* Tags */} {/* Tags */}
<div className="flex flex-wrap gap-2"> <div className="flex flex-wrap gap-1.5">
{tags.map(({ condition, icon, text }, index) => {tags.map(({ condition, icon, text }, index) =>
condition && ( condition && (
<Tag <Tag
@@ -203,9 +202,54 @@ function AnimeInfo({ random = false }) {
)} )}
</div> </div>
{/* Details Section */} {/* Overview - Limited for mobile */}
<div className="space-y-3 py-4 backdrop-blur-md bg-white/5 rounded-xl px-6"> {info?.Overview && (
<div className="grid grid-cols-1 md:grid-cols-2 gap-4"> <div className="text-gray-300 leading-relaxed text-xs">
{info.Overview.length > 150 ? (
<>
{isFull ? (
info.Overview
) : (
<div className="line-clamp-3">{info.Overview}</div>
)}
<button
className="mt-1 text-white/70 hover:text-white transition-colors text-[10px] font-medium"
onClick={() => setIsFull(!isFull)}
>
{isFull ? "Show Less" : "Read More"}
</button>
</>
) : (
info.Overview
)}
</div>
)}
</div>
</div>
{/* Watch Button - Full Width on Mobile */}
<div className="mt-6">
{animeInfo?.animeInfo?.Status?.toLowerCase() !== "not-yet-aired" ? (
<Link
to={`/watch/${animeInfo.id}`}
className="flex justify-center items-center w-full px-4 py-3 bg-white/10 backdrop-blur-md rounded-lg text-white transition-all duration-300 hover:bg-white/20 group"
>
<FontAwesomeIcon
icon={faPlay}
className="mr-2 text-xs group-hover:text-white"
/>
<span className="font-medium text-sm">Watch Now</span>
</Link>
) : (
<div className="flex justify-center items-center w-full px-4 py-3 bg-gray-700/50 rounded-lg">
<span className="font-medium text-sm">Not released</span>
</div>
)}
</div>
{/* Details Section - Full Width on Mobile */}
<div className="mt-6 space-y-3 py-3 backdrop-blur-md bg-white/5 rounded-lg px-3 text-xs">
<div className="grid grid-cols-2 gap-2">
{[ {[
{ label: "Japanese", value: info?.Japanese }, { label: "Japanese", value: info?.Japanese },
{ label: "Synonyms", value: info?.Synonyms }, { label: "Synonyms", value: info?.Synonyms },
@@ -226,14 +270,14 @@ function AnimeInfo({ random = false }) {
{/* Genres */} {/* Genres */}
{info?.Genres && ( {info?.Genres && (
<div className="pt-4 border-t border-white/10"> <div className="pt-2 border-t border-white/10">
<p className="text-gray-400 mb-2">Genres</p> <p className="text-gray-400 text-xs mb-1.5">Genres</p>
<div className="flex flex-wrap gap-2"> <div className="flex flex-wrap gap-1">
{info.Genres.map((genre, index) => ( {info.Genres.map((genre, index) => (
<Link <Link
to={`/genre/${genre.split(" ").join("-")}`} to={`/genre/${genre.split(" ").join("-")}`}
key={index} key={index}
className="px-3 py-1 text-sm bg-white/5 rounded-full hover:bg-white/10 transition-colors" className="px-2 py-0.5 text-[10px] bg-white/5 rounded-md hover:bg-white/10 transition-colors"
> >
{genre} {genre}
</Link> </Link>
@@ -243,7 +287,7 @@ function AnimeInfo({ random = false }) {
)} )}
{/* Studios & Producers */} {/* Studios & Producers */}
<div className="space-y-4 pt-4 border-t border-white/10"> <div className="space-y-2 pt-2 border-t border-white/10">
{[ {[
{ label: "Studios", value: info?.Studios }, { label: "Studios", value: info?.Studios },
{ label: "Producers", value: info?.Producers }, { label: "Producers", value: info?.Producers },
@@ -256,28 +300,56 @@ function AnimeInfo({ random = false }) {
))} ))}
</div> </div>
</div> </div>
</div>
{/* Watch Button */} {/* Desktop Layout - Existing Code */}
{animeInfo?.animeInfo?.Status?.toLowerCase() !== "not-yet-aired" ? ( <div className="hidden md:block">
<Link <div className="flex flex-row gap-6 lg:gap-10">
to={`/watch/${animeInfo.id}`} {/* Poster Section */}
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" <div className="flex-shrink-0">
> <div className="relative w-[220px] lg:w-[260px] aspect-[2/3] rounded-2xl overflow-hidden shadow-[0_8px_32px_rgba(0,0,0,0.3)]">
<FontAwesomeIcon <img
icon={faPlay} src={`${poster}`}
className="mr-2 text-sm group-hover:text-white" alt={`${title} Poster`}
className="w-full h-full object-cover"
/> />
<span className="font-medium">Watch Now</span> {animeInfo.adultContent && (
</Link> <div className="absolute top-3 left-3 px-2.5 py-0.5 bg-red-500/90 backdrop-blur-sm rounded-lg text-xs font-medium">
) : ( 18+
<div className="inline-flex items-center px-6 py-3 bg-gray-700/50 rounded-full">
<span className="font-medium">Not released</span>
</div> </div>
)} )}
</div>
</div>
{/* Info Section */}
<div className="flex-1 space-y-4 lg:space-y-5 min-w-0">
{/* Title */}
<div className="space-y-1">
<h1 className="text-3xl lg:text-4xl font-bold tracking-tight truncate">
{language === "EN" ? title : japanese_title}
</h1>
{language === "EN" && japanese_title && (
<p className="text-white/50 text-sm lg:text-base truncate">JP Title: {japanese_title}</p>
)}
</div>
{/* Tags */}
<div className="flex flex-wrap gap-2">
{tags.map(({ condition, icon, text }, index) =>
condition && (
<Tag
key={index}
index={index}
icon={icon}
text={text}
/>
)
)}
</div>
{/* Overview */} {/* Overview */}
{info?.Overview && ( {info?.Overview && (
<div className="text-gray-300 leading-relaxed max-w-3xl"> <div className="text-gray-300 leading-relaxed max-w-3xl text-sm lg:text-base">
{info.Overview.length > 270 ? ( {info.Overview.length > 270 ? (
<> <>
{isFull {isFull
@@ -296,16 +368,76 @@ function AnimeInfo({ random = false }) {
</div> </div>
)} )}
{/* Share Section */} {/* Watch Button */}
<div className="flex items-center space-x-4 pt-4"> {animeInfo?.animeInfo?.Status?.toLowerCase() !== "not-yet-aired" ? (
<img <Link
src="https://media.tenor.com/hJfxLKzDUFcAAAAM/bleach-best-anime.gif" to={`/watch/${animeInfo.id}`}
alt="Share Anime" className="inline-flex items-center px-5 py-2.5 bg-white/10 backdrop-blur-md rounded-xl text-white transition-all duration-300 hover:bg-white/20 hover:scale-[1.02] group"
className="w-12 h-12 rounded-full" >
<FontAwesomeIcon
icon={faPlay}
className="mr-2 text-sm group-hover:text-white"
/> />
<div> <span className="font-medium">Watch Now</span>
<p className="text-sm font-semibold text-white/70">Share Anime</p> </Link>
<p className="text-white/50">with your friends</p> ) : (
<div className="inline-flex items-center px-5 py-2.5 bg-gray-700/50 rounded-xl">
<span className="font-medium">Not released</span>
</div>
)}
{/* Details Section */}
<div className="space-y-4 py-4 backdrop-blur-md bg-white/5 rounded-xl px-5">
<div className="grid grid-cols-2 gap-3">
{[
{ 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((item, index) => (
<InfoItem
key={index}
label={item.label}
value={item.value}
isProducer={false}
/>
))}
</div>
{/* Genres */}
{info?.Genres && (
<div className="pt-3 border-t border-white/10">
<p className="text-gray-400 text-sm mb-2">Genres</p>
<div className="flex flex-wrap gap-1.5">
{info.Genres.map((genre, index) => (
<Link
to={`/genre/${genre.split(" ").join("-")}`}
key={index}
className="px-3 py-1 text-xs bg-white/5 rounded-lg hover:bg-white/10 transition-colors"
>
{genre}
</Link>
))}
</div>
</div>
)}
{/* Studios & Producers */}
<div className="space-y-3 pt-3 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> </div>
</div> </div>
@@ -315,14 +447,14 @@ function AnimeInfo({ random = false }) {
{/* Seasons Section */} {/* Seasons Section */}
{seasons?.length > 0 && ( {seasons?.length > 0 && (
<div className="container mx-auto px-4 py-12"> <div className="container mx-auto px-3 py-8 sm:px-4 sm:py-12">
<h2 className="text-2xl font-bold mb-8">More Seasons</h2> <h2 className="text-2xl font-bold mb-6 sm:mb-8 px-1">More Seasons</h2>
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4"> <div className="grid grid-cols-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-2 sm:gap-4">
{seasons.map((season, index) => ( {seasons.map((season, index) => (
<Link <Link
to={`/${season.id}`} to={`/${season.id}`}
key={index} key={index}
className={`relative w-full aspect-[3/1] rounded-lg overflow-hidden cursor-pointer group ${ className={`relative w-full aspect-[3/1] sm:aspect-[3/1] rounded-lg overflow-hidden cursor-pointer group ${
currentId === String(season.id) currentId === String(season.id)
? "ring-2 ring-white/40 shadow-lg shadow-white/10" ? "ring-2 ring-white/40 shadow-lg shadow-white/10"
: "" : ""
@@ -353,7 +485,7 @@ function AnimeInfo({ random = false }) {
}`} /> }`} />
{/* Title Container */} {/* Title Container */}
<div className="absolute inset-0 z-30 flex items-center justify-center"> <div className="absolute inset-0 z-30 flex items-center justify-center">
<p className={`text-[18px] font-bold text-center px-4 transition-colors duration-300 ${ <p className={`text-[14px] sm:text-[16px] md:text-[18px] font-bold text-center px-2 sm:px-4 transition-colors duration-300 ${
currentId === String(season.id) currentId === String(season.id)
? "text-white" ? "text-white"
: "text-white/90 group-hover:text-white" : "text-white/90 group-hover:text-white"