mirror of
https://github.com/JustAnimeCore/JustAnime.git
synced 2026-04-17 22:01:45 +00:00
anime info (desktop)
This commit is contained in:
tejaspanchall
@@ -1,12 +1,17 @@
|
|||||||
'use client';
|
'use client';
|
||||||
|
|
||||||
import { useState } from 'react';
|
import { useState, useRef, useEffect } from 'react';
|
||||||
import Image from 'next/image';
|
import Image from 'next/image';
|
||||||
import Link from 'next/link';
|
import Link from 'next/link';
|
||||||
|
import AnimeRow from './AnimeRow';
|
||||||
|
import SeasonRow from './SeasonRow';
|
||||||
|
|
||||||
export default function AnimeDetails({ anime }) {
|
export default function AnimeDetails({ anime }) {
|
||||||
const [isExpanded, setIsExpanded] = useState(false);
|
const [isExpanded, setIsExpanded] = useState(false);
|
||||||
const [activeVideo, setActiveVideo] = useState(null);
|
const [activeVideo, setActiveVideo] = useState(null);
|
||||||
|
const [activeTab, setActiveTab] = useState('synopsis');
|
||||||
|
const [synopsisOverflows, setSynopsisOverflows] = useState(false);
|
||||||
|
const synopsisRef = useRef(null);
|
||||||
|
|
||||||
console.log('AnimeDetails received:', anime);
|
console.log('AnimeDetails received:', anime);
|
||||||
|
|
||||||
@@ -15,85 +20,28 @@ export default function AnimeDetails({ anime }) {
|
|||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
const { info, moreInfo, relatedAnime, recommendations, mostPopular, seasons } = anime;
|
const { info, moreInfo, relatedAnime, recommendations, seasons } = anime;
|
||||||
|
const hasCharacters = info.characterVoiceActor?.length > 0 || info.charactersVoiceActors?.length > 0;
|
||||||
|
const hasVideos = info.promotionalVideos && info.promotionalVideos.length > 0;
|
||||||
|
|
||||||
// Helper function to render anime cards
|
// Check if synopsis overflows when component mounts or when content changes
|
||||||
const renderAnimeCards = (animeList, title) => {
|
useEffect(() => {
|
||||||
if (!animeList || animeList.length === 0) return null;
|
if (synopsisRef.current) {
|
||||||
|
const element = synopsisRef.current;
|
||||||
return (
|
setSynopsisOverflows(element.scrollHeight > element.clientHeight);
|
||||||
<div className="mt-8">
|
}
|
||||||
<h3 className="text-xl font-semibold text-white mb-4 text-center md:text-left">{title}</h3>
|
}, [info.description, activeTab]);
|
||||||
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
|
|
||||||
{animeList.map((item, index) => (
|
|
||||||
<Link key={index} href={`/anime/${item.id}`} className="block group">
|
|
||||||
<div className="bg-[var(--card)] rounded-lg overflow-hidden transition-transform hover:scale-105">
|
|
||||||
<div className="relative aspect-[3/4]">
|
|
||||||
<Image
|
|
||||||
src={item.poster}
|
|
||||||
alt={item.name}
|
|
||||||
fill
|
|
||||||
sizes="(max-width: 768px) 50vw, 20vw"
|
|
||||||
className="object-cover"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="p-2">
|
|
||||||
<p className="text-white text-sm font-medium line-clamp-2">{item.name}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Link>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
// Helper function to render seasons
|
|
||||||
const renderSeasons = () => {
|
|
||||||
if (!seasons || seasons.length === 0) return null;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="mt-8">
|
|
||||||
<h3 className="text-xl font-semibold text-white mb-4 text-center md:text-left">Seasons</h3>
|
|
||||||
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
|
|
||||||
{seasons.map((season, index) => (
|
|
||||||
<Link key={index} href={`/anime/${season.id}`} className="block group">
|
|
||||||
<div className={`${season.isCurrent ? 'border-2 border-[var(--primary)]' : ''} bg-[var(--card)] rounded-lg overflow-hidden transition-transform hover:scale-105`}>
|
|
||||||
<div className="relative aspect-[3/4]">
|
|
||||||
<Image
|
|
||||||
src={season.poster}
|
|
||||||
alt={season.name}
|
|
||||||
fill
|
|
||||||
sizes="(max-width: 768px) 50vw, 20vw"
|
|
||||||
className="object-cover"
|
|
||||||
/>
|
|
||||||
{season.isCurrent && (
|
|
||||||
<div className="absolute top-2 right-2 bg-[var(--primary)] text-black text-xs px-2 py-1 rounded-full">
|
|
||||||
Current
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<div className="p-2">
|
|
||||||
<p className="text-white text-sm font-medium line-clamp-2">{season.title || season.name}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Link>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
// Video modal for promotional videos
|
// Video modal for promotional videos
|
||||||
const VideoModal = ({ video, onClose }) => {
|
const VideoModal = ({ video, onClose }) => {
|
||||||
if (!video) return null;
|
if (!video) return null;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="fixed inset-0 bg-black bg-opacity-80 z-50 flex items-center justify-center p-4">
|
<div className="fixed inset-0 bg-black/70 z-50 flex items-center justify-center p-4 backdrop-blur-sm">
|
||||||
<div className="relative max-w-4xl w-full bg-[var(--card)] rounded-lg overflow-hidden">
|
<div className="relative max-w-4xl w-full bg-[var(--card)] rounded-lg overflow-hidden shadow-2xl border border-gray-700 animate-fadeIn">
|
||||||
<button
|
<button
|
||||||
onClick={onClose}
|
onClick={onClose}
|
||||||
className="absolute top-3 right-3 z-10 bg-black bg-opacity-50 rounded-full p-1"
|
className="absolute top-3 right-3 z-10 bg-black/50 rounded-full p-1 hover:bg-black/70 transition-colors"
|
||||||
>
|
>
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||||||
@@ -108,44 +56,48 @@ export default function AnimeDetails({ anime }) {
|
|||||||
className="w-full h-full"
|
className="w-full h-full"
|
||||||
></iframe>
|
></iframe>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{video.title && (
|
|
||||||
<div className="p-3">
|
|
||||||
<p className="text-white font-medium">{video.title}</p>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// Format status with aired date
|
||||||
|
const getStatusWithAired = () => {
|
||||||
|
let status = moreInfo?.status || '';
|
||||||
|
if (moreInfo?.aired) {
|
||||||
|
status += ` (${moreInfo.aired})`;
|
||||||
|
}
|
||||||
|
return status;
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="relative">
|
<div className="relative">
|
||||||
{/* Video Modal */}
|
{/* Video Modal */}
|
||||||
{activeVideo && <VideoModal video={activeVideo} onClose={() => setActiveVideo(null)} />}
|
{activeVideo && <VideoModal video={activeVideo} onClose={() => setActiveVideo(null)} />}
|
||||||
|
|
||||||
{/* Background Image with Gradient Overlay */}
|
{/* Background Image with Gradient Overlay */}
|
||||||
<div className="absolute inset-0 h-[250px] md:h-[400px] overflow-hidden -z-10">
|
<div className="absolute inset-0 h-[200px] sm:h-[250px] md:h-[400px] overflow-hidden -z-10">
|
||||||
{info.poster && (
|
{info.poster && (
|
||||||
<>
|
<>
|
||||||
<Image
|
<Image
|
||||||
src={info.poster}
|
src={info.poster}
|
||||||
alt={info.name}
|
alt={info.name}
|
||||||
fill
|
fill
|
||||||
className="object-cover opacity-10 blur-sm"
|
className="object-cover opacity-18"
|
||||||
priority
|
priority
|
||||||
/>
|
/>
|
||||||
<div className="absolute inset-0 bg-gradient-to-b from-transparent via-[var(--background)] to-[var(--background)]"></div>
|
<div className="absolute inset-0 bg-gradient-to-b from-transparent via-[rgba(0,0,0,0.6)] to-[var(--background)]"></div>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Main Content */}
|
{/* Main Content */}
|
||||||
<div className="container mx-auto px-4 md:px-4 pt-6 md:pt-8">
|
<div className="container mx-auto px-3 sm:px-4 pt-4 sm:pt-6 md:pt-10">
|
||||||
<div className="flex flex-col md:flex-row md:gap-8">
|
{/* Header Section - Title and Basic Info */}
|
||||||
{/* Left Column - Poster and Mobile Title */}
|
<div className="flex flex-col md:flex-row gap-4 md:gap-10 mb-6 md:mb-8">
|
||||||
<div className="w-full md:w-1/4 lg:w-1/4">
|
{/* Poster */}
|
||||||
<div className="bg-[var(--card)] rounded-xl md:rounded-lg overflow-hidden shadow-xl max-w-[180px] mx-auto md:max-w-none">
|
<div className="w-[180px] sm:w-[220px] md:w-1/4 max-w-[240px] mx-auto md:mx-0">
|
||||||
|
<div className="bg-[var(--card)] rounded-xl overflow-hidden shadow-lg border border-gray-800">
|
||||||
<div className="relative aspect-[3/4] w-full">
|
<div className="relative aspect-[3/4] w-full">
|
||||||
<Image
|
<Image
|
||||||
src={info.poster}
|
src={info.poster}
|
||||||
@@ -157,156 +109,242 @@ export default function AnimeDetails({ anime }) {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Mobile Title Section */}
|
{/* Watch Button - Mobile & Desktop */}
|
||||||
<div className="md:hidden mt-4 text-center">
|
|
||||||
<h1 className="text-2xl font-bold text-white mb-2">{info.name}</h1>
|
|
||||||
{info.jname && (
|
|
||||||
<h2 className="text-base text-gray-400">{info.jname}</h2>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Mobile Quick Info */}
|
|
||||||
<div className="md:hidden mt-4 flex flex-wrap justify-center gap-2">
|
|
||||||
{info.stats?.rating && (
|
|
||||||
<div className="flex items-center bg-[var(--card)] px-3 py-1.5 rounded-full">
|
|
||||||
<svg
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
className="h-4 w-4 text-yellow-400 mr-1"
|
|
||||||
viewBox="0 0 20 20"
|
|
||||||
fill="currentColor"
|
|
||||||
>
|
|
||||||
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
|
|
||||||
</svg>
|
|
||||||
<span className="text-white font-medium">{info.stats.rating}</span>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{moreInfo?.status && (
|
|
||||||
<div className="bg-[var(--card)] px-3 py-1.5 rounded-full text-sm text-white">
|
|
||||||
{moreInfo.status}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{info.stats?.type && (
|
|
||||||
<div className="bg-[var(--card)] px-3 py-1.5 rounded-full text-sm text-white">
|
|
||||||
{info.stats.type}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{info.stats?.episodes && (
|
|
||||||
<div className="bg-[var(--card)] px-3 py-1.5 rounded-full text-sm text-white">
|
|
||||||
{info.stats.episodes.sub > 0 && `SUB ${info.stats.episodes.sub}`}
|
|
||||||
{info.stats.episodes.dub > 0 && info.stats.episodes.sub > 0 && ' | '}
|
|
||||||
{info.stats.episodes.dub > 0 && `DUB ${info.stats.episodes.dub}`}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Right Column - Details */}
|
|
||||||
<div className="w-full md:w-3/4 lg:w-3/4 mt-6 md:mt-0">
|
|
||||||
<div className="flex flex-col gap-5 md:gap-6">
|
|
||||||
{/* Desktop Title Section */}
|
|
||||||
<div className="hidden md:block">
|
|
||||||
<h1 className="text-3xl lg:text-4xl font-bold text-white mb-2">{info.name}</h1>
|
|
||||||
{info.jname && (
|
|
||||||
<h2 className="text-lg text-gray-400">{info.jname}</h2>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Desktop Quick Info */}
|
|
||||||
<div className="hidden md:flex flex-wrap gap-3">
|
|
||||||
{info.stats?.rating && (
|
|
||||||
<div className="flex items-center bg-[var(--card)] px-3 py-1 rounded-full">
|
|
||||||
<svg
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
className="h-4 w-4 text-yellow-400 mr-1"
|
|
||||||
viewBox="0 0 20 20"
|
|
||||||
fill="currentColor"
|
|
||||||
>
|
|
||||||
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
|
|
||||||
</svg>
|
|
||||||
<span className="text-white font-medium">{info.stats.rating}</span>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{moreInfo?.status && (
|
|
||||||
<div className="bg-[var(--card)] px-3 py-1 rounded-full text-sm text-white">
|
|
||||||
{moreInfo.status}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{info.stats?.type && (
|
|
||||||
<div className="bg-[var(--card)] px-3 py-1 rounded-full text-sm text-white">
|
|
||||||
{info.stats.type}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{info.stats?.episodes && (
|
|
||||||
<div className="bg-[var(--card)] px-3 py-1 rounded-full text-sm text-white">
|
|
||||||
{info.stats.episodes.sub > 0 && `SUB ${info.stats.episodes.sub}`}
|
|
||||||
{info.stats.episodes.dub > 0 && info.stats.episodes.sub > 0 && ' | '}
|
|
||||||
{info.stats.episodes.dub > 0 && `DUB ${info.stats.episodes.dub}`}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{info.stats?.quality && (
|
|
||||||
<div className="bg-[var(--card)] px-3 py-1 rounded-full text-sm text-white">
|
|
||||||
{info.stats.quality}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{info.stats?.duration && (
|
|
||||||
<div className="bg-[var(--card)] px-3 py-1 rounded-full text-sm text-white">
|
|
||||||
{info.stats.duration}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Synopsis */}
|
|
||||||
<div className="bg-[var(--card)] rounded-xl md:rounded-lg p-4 md:p-6">
|
|
||||||
<h3 className="text-lg md:text-xl font-semibold text-white mb-3">Synopsis</h3>
|
|
||||||
<div className="relative">
|
|
||||||
<p className={`text-gray-300 leading-relaxed text-sm md:text-base ${!isExpanded ? 'line-clamp-4' : ''}`}>
|
|
||||||
{info.description || 'No description available for this anime.'}
|
|
||||||
</p>
|
|
||||||
{info.description && info.description.length > 100 && (
|
|
||||||
<button
|
|
||||||
onClick={() => setIsExpanded(!isExpanded)}
|
|
||||||
className="text-[var(--primary)] hover:underline text-sm mt-2 font-medium"
|
|
||||||
>
|
|
||||||
{isExpanded ? 'Show Less' : 'Read More'}
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Watch Button */}
|
|
||||||
{info.stats?.episodes && (info.stats.episodes.sub > 0 || info.stats.episodes.dub > 0) && (
|
{info.stats?.episodes && (info.stats.episodes.sub > 0 || info.stats.episodes.dub > 0) && (
|
||||||
<div className="flex items-center gap-4">
|
|
||||||
<Link
|
<Link
|
||||||
href={`/watch/${info.id}?ep=1`}
|
href={`/watch/${info.id}?ep=1`}
|
||||||
className="bg-[#ffffff] text-[var(--background)] px-6 py-3 rounded-xl md:rounded-lg hover:opacity-90 transition-opacity flex items-center justify-center font-medium text-base w-full md:w-auto"
|
className="bg-[#ffffff] text-[var(--background)] px-4 sm:px-6 py-2.5 sm:py-3 rounded-xl mt-3 sm:mt-4 hover:opacity-90 transition-opacity flex items-center justify-center font-medium text-sm sm:text-base w-full shadow-lg"
|
||||||
>
|
>
|
||||||
<svg
|
<svg
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
viewBox="0 0 24 24"
|
viewBox="0 0 24 24"
|
||||||
fill="currentColor"
|
fill="currentColor"
|
||||||
className="h-5 w-5 mr-2"
|
className="h-4 w-4 sm:h-5 sm:w-5 mr-1.5 sm:mr-2"
|
||||||
>
|
>
|
||||||
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9l6 4.5-6 4.5z" />
|
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9l6 4.5-6 4.5z" />
|
||||||
</svg>
|
</svg>
|
||||||
<span>Start Watching</span>
|
<span>Start Watching</span>
|
||||||
</Link>
|
</Link>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Title and Metadata */}
|
||||||
|
<div className="flex-1 pt-3 md:pt-2">
|
||||||
|
{/* Title Section */}
|
||||||
|
<div className="text-center md:text-left">
|
||||||
|
<h1 className="text-xl sm:text-2xl md:text-3xl lg:text-4xl font-bold text-white mb-1 sm:mb-2">
|
||||||
|
{info.name}
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
{moreInfo?.japanese && (
|
||||||
|
<h2 className="text-sm sm:text-base md:text-lg text-gray-400 mb-1 sm:mb-2">{moreInfo.japanese}</h2>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Synonyms */}
|
||||||
|
{moreInfo?.synonyms && (
|
||||||
|
<div className="mt-1 sm:mt-2 mb-2 sm:mb-4">
|
||||||
|
<p className="text-xs sm:text-sm text-gray-400 italic">{moreInfo.synonyms}</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Status Badges */}
|
||||||
|
<div className="flex flex-wrap justify-center md:justify-start gap-1.5 sm:gap-2 my-4 sm:my-5">
|
||||||
|
{info.stats?.rating && (
|
||||||
|
<div className="flex items-center bg-[var(--card)] px-2 sm:px-3 py-1 sm:py-1.5 rounded-full">
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
className="h-3.5 w-3.5 sm:h-4 sm:w-4 text-yellow-400 mr-1"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
fill="currentColor"
|
||||||
|
>
|
||||||
|
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
|
||||||
|
</svg>
|
||||||
|
<span className="text-white text-xs sm:text-sm font-medium">{info.stats.rating}</span>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* Promotional Videos */}
|
{/* Status with Aired Date */}
|
||||||
{info.promotionalVideos && info.promotionalVideos.length > 0 && (
|
{moreInfo?.status && (
|
||||||
<div className="bg-[var(--card)] rounded-xl md:rounded-lg p-4 md:p-6">
|
<div className="bg-[var(--card)] px-2 sm:px-3 py-1 sm:py-1.5 rounded-full text-xs sm:text-sm text-white">
|
||||||
<h3 className="text-lg md:text-xl font-semibold text-white mb-3">Promotional Videos</h3>
|
{getStatusWithAired()}
|
||||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{info.stats?.type && (
|
||||||
|
<div className="bg-[var(--card)] px-2 sm:px-3 py-1 sm:py-1.5 rounded-full text-xs sm:text-sm text-white">
|
||||||
|
{info.stats.type}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{info.stats?.episodes && (
|
||||||
|
<div className="bg-[var(--card)] px-2 sm:px-3 py-1 sm:py-1.5 rounded-full text-xs sm:text-sm text-white">
|
||||||
|
{info.stats.episodes.sub > 0 && `SUB ${info.stats.episodes.sub}`}
|
||||||
|
{info.stats.episodes.dub > 0 && info.stats.episodes.sub > 0 && ' | '}
|
||||||
|
{info.stats.episodes.dub > 0 && `DUB ${info.stats.episodes.dub}`}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{info.stats?.quality && (
|
||||||
|
<div className="bg-[var(--card)] px-2 sm:px-3 py-1 sm:py-1.5 rounded-full text-xs sm:text-sm text-white">
|
||||||
|
{info.stats.quality}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{info.stats?.duration && (
|
||||||
|
<div className="bg-[var(--card)] px-2 sm:px-3 py-1 sm:py-1.5 rounded-full text-xs sm:text-sm text-white">
|
||||||
|
{info.stats.duration}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Genres & Studios */}
|
||||||
|
<div className="space-y-3 sm:space-y-4 mt-3 sm:mt-5">
|
||||||
|
{/* Genres */}
|
||||||
|
{moreInfo?.genres && moreInfo.genres.length > 0 && (
|
||||||
|
<div>
|
||||||
|
<h3 className="text-white text-sm sm:text-base font-medium mb-2 sm:mb-3 text-center md:text-left">Genres</h3>
|
||||||
|
<div className="flex flex-wrap justify-center md:justify-start gap-1.5 sm:gap-2">
|
||||||
|
{moreInfo.genres.map((genre, index) => (
|
||||||
|
<Link
|
||||||
|
key={index}
|
||||||
|
href={`/genre/${genre.toLowerCase()}`}
|
||||||
|
className="px-2 sm:px-3 py-1 sm:py-1.5 bg-[var(--card)] text-gray-300 text-xs sm:text-sm rounded-full whitespace-nowrap hover:text-white transition-colors hover:bg-[var(--card-hover)]"
|
||||||
|
>
|
||||||
|
{genre}
|
||||||
|
</Link>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Studios */}
|
||||||
|
{moreInfo?.studios && (
|
||||||
|
<div>
|
||||||
|
<h3 className="text-white text-sm sm:text-base font-medium mb-2 sm:mb-3 text-center md:text-left">Studios</h3>
|
||||||
|
<div className="flex flex-wrap justify-center md:justify-start gap-1.5 sm:gap-2">
|
||||||
|
<div className="px-2 sm:px-3 py-1 sm:py-1.5 bg-[var(--card)] text-gray-300 text-xs sm:text-sm rounded-full hover:text-white">
|
||||||
|
{moreInfo.studios}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Details Tabs - Synopsis, Characters, Videos */}
|
||||||
|
<div className="bg-[var(--card)] rounded-xl shadow-lg mb-6 sm:mb-8 border border-gray-800">
|
||||||
|
{/* Tab Navigation */}
|
||||||
|
<div className="flex flex-wrap border-b border-gray-800">
|
||||||
|
<button
|
||||||
|
className={`px-3 sm:px-5 py-2.5 sm:py-3 text-sm sm:text-base font-medium transition-colors ${activeTab === 'synopsis' ? 'text-white border-b-2 border-[var(--primary)]' : 'text-gray-400 hover:text-white'}`}
|
||||||
|
onClick={() => setActiveTab('synopsis')}
|
||||||
|
>
|
||||||
|
Synopsis
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{hasCharacters && (
|
||||||
|
<button
|
||||||
|
className={`px-3 sm:px-5 py-2.5 sm:py-3 text-sm sm:text-base font-medium transition-colors ${activeTab === 'characters' ? 'text-white border-b-2 border-[var(--primary)]' : 'text-gray-400 hover:text-white'}`}
|
||||||
|
onClick={() => setActiveTab('characters')}
|
||||||
|
>
|
||||||
|
Characters
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{hasVideos && (
|
||||||
|
<button
|
||||||
|
className={`px-3 sm:px-5 py-2.5 sm:py-3 text-sm sm:text-base font-medium transition-colors ${activeTab === 'videos' ? 'text-white border-b-2 border-[var(--primary)]' : 'text-gray-400 hover:text-white'}`}
|
||||||
|
onClick={() => setActiveTab('videos')}
|
||||||
|
>
|
||||||
|
Promotional Videos
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Tab Content */}
|
||||||
|
<div className="p-3 sm:p-5">
|
||||||
|
{/* Synopsis Tab */}
|
||||||
|
{activeTab === 'synopsis' && (
|
||||||
|
<div className="relative">
|
||||||
|
<p
|
||||||
|
ref={synopsisRef}
|
||||||
|
className={`text-gray-300 leading-relaxed text-xs sm:text-sm md:text-base ${!isExpanded ? 'line-clamp-4 md:line-clamp-6' : ''}`}
|
||||||
|
>
|
||||||
|
{info.description || 'No description available for this anime.'}
|
||||||
|
</p>
|
||||||
|
{synopsisOverflows && (
|
||||||
|
<button
|
||||||
|
onClick={() => setIsExpanded(!isExpanded)}
|
||||||
|
className="text-[var(--primary)] hover:underline text-xs sm:text-sm mt-2 sm:mt-3 font-medium"
|
||||||
|
>
|
||||||
|
{isExpanded ? 'Show Less' : 'Read More'}
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Characters Tab */}
|
||||||
|
{activeTab === 'characters' && hasCharacters && (
|
||||||
|
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-3 gap-2 sm:gap-4 max-h-[70vh] overflow-y-auto pr-1">
|
||||||
|
{(info.characterVoiceActor || info.charactersVoiceActors || []).map((item, index) => (
|
||||||
|
<div key={index} className="bg-[var(--background)] rounded overflow-hidden">
|
||||||
|
<div className="flex">
|
||||||
|
{/* Character Image - No padding */}
|
||||||
|
<div className="relative w-[50px] sm:w-[60px] h-[60px] sm:h-[72px] flex-shrink-0">
|
||||||
|
<Image
|
||||||
|
src={item.character.poster}
|
||||||
|
alt={item.character.name}
|
||||||
|
fill
|
||||||
|
className="object-cover"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Text content in the middle */}
|
||||||
|
<div className="flex-1 py-1.5 sm:py-2.5 px-2 sm:px-3 flex flex-col justify-center min-w-0">
|
||||||
|
<div className="flex justify-between items-center gap-2 sm:gap-3">
|
||||||
|
{/* Character Name */}
|
||||||
|
<div className="min-w-0 flex-1">
|
||||||
|
<p className="text-white font-medium text-xs sm:text-sm truncate">{item.character.name}</p>
|
||||||
|
<p className="text-[10px] sm:text-xs text-gray-400 truncate">{item.character.cast || 'Main'}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Voice Actor Name */}
|
||||||
|
<div className="min-w-0 flex-1 text-right">
|
||||||
|
<p className="text-white font-medium text-xs sm:text-sm truncate">{item.voiceActor.name}</p>
|
||||||
|
<p className="text-[10px] sm:text-xs text-gray-400 truncate">{item.voiceActor.cast || 'Japanese'}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Voice Actor Image - No padding */}
|
||||||
|
<div className="relative w-[50px] sm:w-[60px] h-[60px] sm:h-[72px] flex-shrink-0">
|
||||||
|
<Image
|
||||||
|
src={item.voiceActor.poster}
|
||||||
|
alt={item.voiceActor.name}
|
||||||
|
fill
|
||||||
|
className="object-cover"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Videos Tab */}
|
||||||
|
{activeTab === 'videos' && hasVideos && (
|
||||||
|
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-2 sm:gap-3">
|
||||||
{info.promotionalVideos.map((video, index) => (
|
{info.promotionalVideos.map((video, index) => (
|
||||||
<div
|
<div
|
||||||
key={index}
|
key={index}
|
||||||
className="relative aspect-video cursor-pointer group overflow-hidden rounded-lg"
|
className="relative aspect-video cursor-pointer group overflow-hidden rounded-md"
|
||||||
onClick={() => setActiveVideo(video)}
|
onClick={() => setActiveVideo(video)}
|
||||||
>
|
>
|
||||||
<div className="absolute inset-0 bg-black bg-opacity-30 group-hover:bg-opacity-20 transition-all duration-200 flex items-center justify-center">
|
<div className="absolute inset-0 bg-black/40 group-hover:bg-black/20 transition-all duration-300 flex items-center justify-center">
|
||||||
<div className="w-12 h-12 rounded-full bg-[var(--primary)] flex items-center justify-center">
|
<div className="w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-[var(--primary)] flex items-center justify-center transform group-hover:scale-110 transition-transform duration-300">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 text-white" viewBox="0 0 20 20" fill="currentColor">
|
<svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 sm:h-5 sm:w-5 text-white" viewBox="0 0 20 20" fill="currentColor">
|
||||||
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clipRule="evenodd" />
|
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clipRule="evenodd" />
|
||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
@@ -320,115 +358,24 @@ export default function AnimeDetails({ anime }) {
|
|||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* Additional Info */}
|
|
||||||
<div className="space-y-5 md:space-y-6">
|
|
||||||
{/* Genres */}
|
|
||||||
{moreInfo?.genres && moreInfo.genres.length > 0 && (
|
|
||||||
<div>
|
|
||||||
<h3 className="text-white font-medium mb-3 text-center md:text-left">Genres</h3>
|
|
||||||
<div className="overflow-x-auto hide-scrollbar">
|
|
||||||
<div className="flex flex-wrap md:flex-nowrap gap-2 justify-center md:justify-start pb-1">
|
|
||||||
{moreInfo.genres.map((genre, index) => (
|
|
||||||
<Link
|
|
||||||
key={index}
|
|
||||||
href={`/genre/${genre.toLowerCase()}`}
|
|
||||||
className="px-3 py-1.5 bg-[var(--card)] text-gray-300 text-sm rounded-full whitespace-nowrap hover:text-white transition-colors"
|
|
||||||
>
|
|
||||||
{genre}
|
|
||||||
</Link>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Studios */}
|
|
||||||
{moreInfo?.studios && (
|
|
||||||
<div>
|
|
||||||
<h3 className="text-white font-medium mb-3 text-center md:text-left">Studios</h3>
|
|
||||||
<div className="flex flex-wrap gap-2 justify-center md:justify-start">
|
|
||||||
<div className="px-3 py-1.5 bg-[var(--card)] text-gray-300 text-sm rounded-full">
|
|
||||||
{moreInfo.studios}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Aired Date */}
|
|
||||||
{moreInfo?.aired && (
|
|
||||||
<div>
|
|
||||||
<h3 className="text-white font-medium mb-3 text-center md:text-left">Aired</h3>
|
|
||||||
<div className="flex flex-wrap gap-2 justify-center md:justify-start">
|
|
||||||
<div className="px-3 py-1.5 bg-[var(--card)] text-gray-300 text-sm rounded-full">
|
|
||||||
{moreInfo.aired}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Character & Voice Actors */}
|
|
||||||
{(info.characterVoiceActor?.length > 0 || info.charactersVoiceActors?.length > 0) && (
|
|
||||||
<div>
|
|
||||||
<h3 className="text-white font-medium mb-3 text-center md:text-left">Characters & Voice Actors</h3>
|
|
||||||
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
||||||
{(info.characterVoiceActor || info.charactersVoiceActors || []).map((item, index) => (
|
|
||||||
<div key={index} className="bg-[var(--card)] p-3 rounded-lg flex items-center gap-3">
|
|
||||||
<div className="flex-1 min-w-0">
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<div className="relative w-10 h-10 rounded-full overflow-hidden">
|
|
||||||
<Image
|
|
||||||
src={item.character.poster}
|
|
||||||
alt={item.character.name}
|
|
||||||
fill
|
|
||||||
className="object-cover"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="min-w-0">
|
|
||||||
<p className="text-sm text-white truncate">{item.character.name}</p>
|
|
||||||
<p className="text-xs text-gray-400 truncate">{item.character.cast}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="flex-1 min-w-0">
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<div className="relative w-10 h-10 rounded-full overflow-hidden">
|
|
||||||
<Image
|
|
||||||
src={item.voiceActor.poster}
|
|
||||||
alt={item.voiceActor.name}
|
|
||||||
fill
|
|
||||||
className="object-cover"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="min-w-0">
|
|
||||||
<p className="text-sm text-white truncate">{item.voiceActor.name}</p>
|
|
||||||
<p className="text-xs text-gray-400 truncate">{item.voiceActor.cast}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Seasons Section */}
|
{/* Seasons Section */}
|
||||||
{renderSeasons()}
|
{seasons && seasons.length > 0 && (
|
||||||
|
<SeasonRow title="Seasons" seasons={seasons} />
|
||||||
|
)}
|
||||||
|
|
||||||
{/* Related Anime Section */}
|
{/* Related Anime Section */}
|
||||||
{renderAnimeCards(relatedAnime, 'Related Anime')}
|
{relatedAnime && relatedAnime.length > 0 && (
|
||||||
|
<AnimeRow title="Related Anime" animeList={relatedAnime} />
|
||||||
|
)}
|
||||||
|
|
||||||
{/* Recommendations Section */}
|
{/* Recommendations Section */}
|
||||||
{renderAnimeCards(recommendations, 'You May Also Like')}
|
{recommendations && recommendations.length > 0 && (
|
||||||
|
<AnimeRow title="You May Also Like" animeList={recommendations} />
|
||||||
{/* Most Popular Section */}
|
)}
|
||||||
{renderAnimeCards(mostPopular, 'Most Popular')}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -1,101 +0,0 @@
|
|||||||
import Image from 'next/image';
|
|
||||||
|
|
||||||
export default function AnimeInfo({ anime }) {
|
|
||||||
return (
|
|
||||||
<div className="bg-[#1a1a1a] rounded-xl shadow-2xl overflow-hidden">
|
|
||||||
<div className="relative">
|
|
||||||
{/* Banner Image - You'll need to add bannerImage to your anime object */}
|
|
||||||
<div className="w-full h-48 relative overflow-hidden">
|
|
||||||
<div className="absolute inset-0 bg-gradient-to-t from-[#1a1a1a] to-transparent z-10" />
|
|
||||||
{anime.bannerImage ? (
|
|
||||||
<Image
|
|
||||||
src={anime.bannerImage}
|
|
||||||
alt=""
|
|
||||||
fill
|
|
||||||
className="object-cover opacity-50"
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<div className="w-full h-full bg-gradient-to-r from-gray-800 to-gray-900" />
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Content */}
|
|
||||||
<div className="relative z-20 -mt-24 px-6 pb-6">
|
|
||||||
<div className="flex flex-col md:flex-row gap-6">
|
|
||||||
{/* Cover Image */}
|
|
||||||
<div className="relative w-40 md:w-48 flex-shrink-0">
|
|
||||||
<div className="aspect-[2/3] relative rounded-lg overflow-hidden shadow-xl border-4 border-[#1a1a1a]">
|
|
||||||
<Image
|
|
||||||
src={anime.coverImage}
|
|
||||||
alt={anime.title}
|
|
||||||
fill
|
|
||||||
className="object-cover"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Details */}
|
|
||||||
<div className="flex-grow">
|
|
||||||
{/* Title and Alternative Titles */}
|
|
||||||
<div className="mb-4">
|
|
||||||
<h1 className="text-2xl md:text-3xl font-bold text-white mb-2">
|
|
||||||
{anime.title}
|
|
||||||
</h1>
|
|
||||||
{anime.alternativeTitles && (
|
|
||||||
<div className="text-gray-400 text-sm">
|
|
||||||
{anime.alternativeTitles.join(' • ')}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Metadata Grid */}
|
|
||||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
|
|
||||||
<div className="bg-[#242424] rounded-lg p-3">
|
|
||||||
<div className="text-gray-400 text-xs mb-1">Status</div>
|
|
||||||
<div className="text-white font-medium">{anime.status}</div>
|
|
||||||
</div>
|
|
||||||
<div className="bg-[#242424] rounded-lg p-3">
|
|
||||||
<div className="text-gray-400 text-xs mb-1">Episodes</div>
|
|
||||||
<div className="text-white font-medium">{anime.totalEpisodes}</div>
|
|
||||||
</div>
|
|
||||||
<div className="bg-[#242424] rounded-lg p-3">
|
|
||||||
<div className="text-gray-400 text-xs mb-1">Season</div>
|
|
||||||
<div className="text-white font-medium">{anime.season} {anime.year}</div>
|
|
||||||
</div>
|
|
||||||
<div className="bg-[#242424] rounded-lg p-3">
|
|
||||||
<div className="text-gray-400 text-xs mb-1">Studio</div>
|
|
||||||
<div className="text-white font-medium">{anime.studio}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Genres */}
|
|
||||||
{anime.genres && (
|
|
||||||
<div className="mb-6">
|
|
||||||
<div className="text-gray-400 text-sm mb-2">Genres</div>
|
|
||||||
<div className="flex flex-wrap gap-2">
|
|
||||||
{anime.genres.map((genre) => (
|
|
||||||
<span
|
|
||||||
key={genre}
|
|
||||||
className="px-3 py-1 rounded-full bg-[#242424] text-white text-sm hover:bg-[#2a2a2a] transition-colors cursor-pointer"
|
|
||||||
>
|
|
||||||
{genre}
|
|
||||||
</span>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Synopsis */}
|
|
||||||
<div>
|
|
||||||
<div className="text-gray-400 text-sm mb-2">Synopsis</div>
|
|
||||||
<div className="text-gray-300 text-sm leading-relaxed">
|
|
||||||
{anime.synopsis}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
131
src/components/AnimeRow.js
Normal file
131
src/components/AnimeRow.js
Normal file
@@ -0,0 +1,131 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useRef, useState, useEffect } from 'react';
|
||||||
|
import AnimeCard from './AnimeCard';
|
||||||
|
|
||||||
|
export default function AnimeRow({ title, animeList }) {
|
||||||
|
const scrollContainerRef = useRef(null);
|
||||||
|
const contentRef = useRef(null);
|
||||||
|
const [showLeftButton, setShowLeftButton] = useState(false);
|
||||||
|
const [showRightButton, setShowRightButton] = useState(false);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!animeList || animeList.length <= 7) {
|
||||||
|
setShowRightButton(false);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
setShowRightButton(true);
|
||||||
|
|
||||||
|
const checkScroll = () => {
|
||||||
|
if (!scrollContainerRef.current) return;
|
||||||
|
|
||||||
|
const { scrollLeft, scrollWidth, clientWidth } = scrollContainerRef.current;
|
||||||
|
setShowLeftButton(scrollLeft > 0);
|
||||||
|
setShowRightButton(scrollLeft + clientWidth < scrollWidth - 10);
|
||||||
|
};
|
||||||
|
|
||||||
|
const scrollContainer = scrollContainerRef.current;
|
||||||
|
scrollContainer.addEventListener('scroll', checkScroll);
|
||||||
|
|
||||||
|
// Initial check
|
||||||
|
checkScroll();
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
if (scrollContainer) {
|
||||||
|
scrollContainer.removeEventListener('scroll', checkScroll);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}, [animeList]);
|
||||||
|
|
||||||
|
const scroll = (direction) => {
|
||||||
|
if (!scrollContainerRef.current) return;
|
||||||
|
|
||||||
|
const container = scrollContainerRef.current;
|
||||||
|
// Calculate single card width based on viewport
|
||||||
|
const isMobile = window.innerWidth < 640; // sm breakpoint in Tailwind
|
||||||
|
const cardsPerRow = isMobile ? 3 : 7;
|
||||||
|
const singleCardWidth = container.clientWidth / cardsPerRow;
|
||||||
|
|
||||||
|
if (direction === 'left') {
|
||||||
|
container.scrollBy({ left: -singleCardWidth, behavior: 'smooth' });
|
||||||
|
} else {
|
||||||
|
container.scrollBy({ left: singleCardWidth, behavior: 'smooth' });
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (!animeList || animeList.length === 0) return null;
|
||||||
|
|
||||||
|
// Create groups of cards for pagination - 3 for mobile, 7 for larger screens
|
||||||
|
const cardGroups = [];
|
||||||
|
const isMobileView = typeof window !== 'undefined' && window.innerWidth < 640;
|
||||||
|
const groupSize = isMobileView ? 3 : 7;
|
||||||
|
|
||||||
|
for (let i = 0; i < animeList.length; i += groupSize) {
|
||||||
|
cardGroups.push(animeList.slice(i, i + groupSize));
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="mt-8">
|
||||||
|
<div className="flex justify-between items-center mb-4">
|
||||||
|
<h3 className="text-xl font-semibold text-white">{title}</h3>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="relative">
|
||||||
|
{showLeftButton && (
|
||||||
|
<button
|
||||||
|
onClick={() => scroll('left')}
|
||||||
|
className="absolute left-0 top-1/2 -translate-y-1/2 z-10 w-10 h-10 rounded-full bg-black/70 flex items-center justify-center text-white hover:bg-black shadow-lg -ml-5"
|
||||||
|
aria-label="Scroll left"
|
||||||
|
>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div
|
||||||
|
ref={scrollContainerRef}
|
||||||
|
className="overflow-x-auto hide-scrollbar scroll-smooth"
|
||||||
|
style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
ref={contentRef}
|
||||||
|
className="flex snap-x snap-mandatory"
|
||||||
|
>
|
||||||
|
{cardGroups.map((group, groupIndex) => (
|
||||||
|
<div
|
||||||
|
key={groupIndex}
|
||||||
|
className="grid grid-cols-3 sm:grid-cols-7 gap-3 snap-start snap-always min-w-full px-1"
|
||||||
|
>
|
||||||
|
{group.map((anime, index) => (
|
||||||
|
<div key={index}>
|
||||||
|
<AnimeCard anime={anime} isRecent={true} />
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
{/* Add empty placeholders if needed to ensure slots are filled */}
|
||||||
|
{Array.from({ length: (typeof window !== 'undefined' && window.innerWidth < 640) ?
|
||||||
|
Math.max(0, 3 - group.length) :
|
||||||
|
Math.max(0, 7 - group.length) }).map((_, index) => (
|
||||||
|
<div key={`empty-${index}`} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{showRightButton && (
|
||||||
|
<button
|
||||||
|
onClick={() => scroll('right')}
|
||||||
|
className="absolute right-0 top-1/2 -translate-y-1/2 z-10 w-10 h-10 rounded-full bg-black/70 flex items-center justify-center text-white hover:bg-black shadow-lg -mr-5"
|
||||||
|
aria-label="Scroll right"
|
||||||
|
>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
56
src/components/SeasonCard.js
Normal file
56
src/components/SeasonCard.js
Normal file
@@ -0,0 +1,56 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import Image from 'next/image';
|
||||||
|
import Link from 'next/link';
|
||||||
|
import { useState } from 'react';
|
||||||
|
|
||||||
|
export default function SeasonCard({ season }) {
|
||||||
|
const [imageError, setImageError] = useState(false);
|
||||||
|
|
||||||
|
if (!season) return null;
|
||||||
|
|
||||||
|
const handleImageError = () => {
|
||||||
|
console.log("Image error for:", season.name);
|
||||||
|
setImageError(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Get image URL with fallback
|
||||||
|
const imageSrc = imageError ? '/images/placeholder.png' : season.poster;
|
||||||
|
|
||||||
|
// Generate link
|
||||||
|
const infoLink = `/anime/${season.id}`;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Link
|
||||||
|
href={infoLink}
|
||||||
|
className="block w-full rounded-lg overflow-hidden transition-transform duration-300 hover:scale-[1.02] group"
|
||||||
|
prefetch={false}
|
||||||
|
>
|
||||||
|
<div className={`relative aspect-[3/1.5] rounded-lg overflow-hidden bg-gray-900 shadow-lg ${season.isCurrent ? 'border-2 border-white' : ''}`}>
|
||||||
|
{/* Background image with blur */}
|
||||||
|
<div className="absolute inset-0">
|
||||||
|
<div className="absolute inset-0 bg-black opacity-60 z-[2]"></div>
|
||||||
|
<Image
|
||||||
|
src={imageSrc}
|
||||||
|
alt={season.name || 'Season'}
|
||||||
|
fill
|
||||||
|
className="object-cover blur-[2px]"
|
||||||
|
onError={handleImageError}
|
||||||
|
sizes="(max-width: 768px) 100vw, 50vw"
|
||||||
|
unoptimized={true}
|
||||||
|
priority={false}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Content overlay */}
|
||||||
|
<div className="absolute inset-0 flex items-center justify-center z-10 p-3">
|
||||||
|
<div className="text-center">
|
||||||
|
<h3 className="text-white font-bold text-lg line-clamp-1">
|
||||||
|
{season.title || season.name}
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Link>
|
||||||
|
);
|
||||||
|
}
|
||||||
162
src/components/SeasonRow.js
Normal file
162
src/components/SeasonRow.js
Normal file
@@ -0,0 +1,162 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useRef, useState, useEffect } from 'react';
|
||||||
|
import SeasonCard from './SeasonCard';
|
||||||
|
|
||||||
|
export default function SeasonRow({ title, seasons }) {
|
||||||
|
const scrollContainerRef = useRef(null);
|
||||||
|
const contentRef = useRef(null);
|
||||||
|
const [showLeftButton, setShowLeftButton] = useState(false);
|
||||||
|
const [showRightButton, setShowRightButton] = useState(false);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!seasons || seasons.length <= 7) {
|
||||||
|
setShowRightButton(false);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
setShowRightButton(true);
|
||||||
|
|
||||||
|
const checkScroll = () => {
|
||||||
|
if (!scrollContainerRef.current) return;
|
||||||
|
|
||||||
|
const { scrollLeft, scrollWidth, clientWidth } = scrollContainerRef.current;
|
||||||
|
setShowLeftButton(scrollLeft > 0);
|
||||||
|
setShowRightButton(scrollLeft + clientWidth < scrollWidth - 10);
|
||||||
|
};
|
||||||
|
|
||||||
|
const scrollContainer = scrollContainerRef.current;
|
||||||
|
scrollContainer.addEventListener('scroll', checkScroll);
|
||||||
|
|
||||||
|
// Initial check
|
||||||
|
checkScroll();
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
if (scrollContainer) {
|
||||||
|
scrollContainer.removeEventListener('scroll', checkScroll);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}, [seasons]);
|
||||||
|
|
||||||
|
// Updated effect to handle mobile view arrows
|
||||||
|
useEffect(() => {
|
||||||
|
if (!seasons) return;
|
||||||
|
|
||||||
|
// Check if we're on mobile and have more than 3 seasons
|
||||||
|
const isMobileView = typeof window !== 'undefined' && window.innerWidth < 640;
|
||||||
|
const showArrowsOnMobile = isMobileView && seasons.length > 3;
|
||||||
|
|
||||||
|
// On desktop, show arrows if more than 7 seasons
|
||||||
|
const showArrowsOnDesktop = !isMobileView && seasons.length > 7;
|
||||||
|
|
||||||
|
if (showArrowsOnMobile || showArrowsOnDesktop) {
|
||||||
|
setShowRightButton(true);
|
||||||
|
} else {
|
||||||
|
setShowRightButton(false);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Listen for resize events to update arrow visibility
|
||||||
|
const handleResize = () => {
|
||||||
|
const isMobile = window.innerWidth < 640;
|
||||||
|
const showArrows = isMobile ? seasons.length > 3 : seasons.length > 7;
|
||||||
|
setShowRightButton(showArrows);
|
||||||
|
};
|
||||||
|
|
||||||
|
window.addEventListener('resize', handleResize);
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
window.removeEventListener('resize', handleResize);
|
||||||
|
};
|
||||||
|
}, [seasons]);
|
||||||
|
|
||||||
|
const scroll = (direction) => {
|
||||||
|
if (!scrollContainerRef.current) return;
|
||||||
|
|
||||||
|
const container = scrollContainerRef.current;
|
||||||
|
// Calculate single card width based on viewport
|
||||||
|
const isMobile = window.innerWidth < 640; // sm breakpoint in Tailwind
|
||||||
|
const cardsPerRow = isMobile ? 3 : 7;
|
||||||
|
const singleCardWidth = container.clientWidth / cardsPerRow;
|
||||||
|
|
||||||
|
if (direction === 'left') {
|
||||||
|
container.scrollBy({ left: -singleCardWidth, behavior: 'smooth' });
|
||||||
|
} else {
|
||||||
|
container.scrollBy({ left: singleCardWidth, behavior: 'smooth' });
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (!seasons || seasons.length === 0) return null;
|
||||||
|
|
||||||
|
// Create groups of cards for pagination - 3 for mobile, 7 for larger screens
|
||||||
|
const seasonGroups = [];
|
||||||
|
const isMobileView = typeof window !== 'undefined' && window.innerWidth < 640;
|
||||||
|
const groupSize = isMobileView ? 3 : 7;
|
||||||
|
|
||||||
|
for (let i = 0; i < seasons.length; i += groupSize) {
|
||||||
|
seasonGroups.push(seasons.slice(i, i + groupSize));
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="mt-8">
|
||||||
|
<div className="flex justify-between items-center mb-4">
|
||||||
|
<h3 className="text-xl font-semibold text-white">{title || 'Seasons'}</h3>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="relative">
|
||||||
|
{showLeftButton && (
|
||||||
|
<button
|
||||||
|
onClick={() => scroll('left')}
|
||||||
|
className="absolute left-0 top-1/2 -translate-y-1/2 z-10 w-10 h-10 rounded-full bg-black/70 flex items-center justify-center text-white hover:bg-black shadow-lg -ml-5"
|
||||||
|
aria-label="Scroll left"
|
||||||
|
>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div
|
||||||
|
ref={scrollContainerRef}
|
||||||
|
className="overflow-x-auto hide-scrollbar scroll-smooth"
|
||||||
|
style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
ref={contentRef}
|
||||||
|
className="flex snap-x snap-mandatory"
|
||||||
|
>
|
||||||
|
{seasonGroups.map((group, groupIndex) => (
|
||||||
|
<div
|
||||||
|
key={groupIndex}
|
||||||
|
className="grid grid-cols-3 sm:grid-cols-7 gap-3 snap-start snap-always min-w-full px-1"
|
||||||
|
>
|
||||||
|
{group.map((season, index) => (
|
||||||
|
<div key={index}>
|
||||||
|
<SeasonCard season={season} />
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
{/* Add empty placeholders if needed to ensure slots are filled */}
|
||||||
|
{Array.from({ length: (typeof window !== 'undefined' && window.innerWidth < 640) ?
|
||||||
|
Math.max(0, 3 - group.length) :
|
||||||
|
Math.max(0, 7 - group.length) }).map((_, index) => (
|
||||||
|
<div key={`empty-${index}`} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{showRightButton && (
|
||||||
|
<button
|
||||||
|
onClick={() => scroll('right')}
|
||||||
|
className="absolute right-0 top-1/2 -translate-y-1/2 z-10 w-10 h-10 rounded-full bg-black/70 flex items-center justify-center text-white hover:bg-black shadow-lg -mr-5"
|
||||||
|
aria-label="Scroll right"
|
||||||
|
>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user