fresh

2026-04-17 22:01:45 +00:00 · 2025-05-28 23:11:20 +05:30
commit 00797f0c96
52 changed files with 15166 additions and 0 deletions
--- a/src/app/anime/[id]/page.js
+++ b/src/app/anime/[id]/page.js
@@ -0,0 +1,114 @@
+import React, { Suspense } from 'react';
+import Link from 'next/link';
+import { fetchAnimeInfo } from '@/lib/api';
+import AnimeDetails from '@/components/AnimeDetails.js';
+
+// Loading state component
+const LoadingState = () => (
+  <div className="min-h-screen">
+    <div className="animate-pulse">
+      {/* Background Placeholder */}
+      <div className="h-[400px] bg-gray-800"></div>
+      
+      {/* Content Placeholder */}
+      <div className="container mx-auto px-4 -mt-32">
+        <div className="flex flex-col md:flex-row gap-8">
+          {/* Poster Placeholder */}
+          <div className="w-full md:w-1/4">
+            <div className="bg-gray-700 rounded-lg aspect-[3/4]"></div>
+          </div>
+          
+          {/* Details Placeholder */}
+          <div className="w-full md:w-3/4">
+            <div className="h-8 bg-gray-700 rounded mb-4 w-3/4"></div>
+            <div className="h-4 bg-gray-700 rounded mb-2 w-1/2"></div>
+            <div className="h-4 bg-gray-700 rounded mb-6 w-1/3"></div>
+            <div className="h-28 bg-gray-700 rounded mb-4"></div>
+            <div className="h-10 bg-gray-700 rounded w-40"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+);
+
+// Error state component
+const ErrorState = ({ error }) => (
+  <div className="min-h-screen flex items-center justify-center">
+    <div className="text-center max-w-lg mx-auto p-6">
+      <h1 className="text-2xl font-bold text-white mb-4">Error Loading Anime</h1>
+      <p className="text-gray-400 mb-6">{error}</p>
+      <div className="space-y-4">
+        <button
+          onClick={() => window.location.reload()}
+          className="px-6 py-3 bg-[var(--primary)] text-[var(--background)] rounded-lg hover:opacity-90 transition-opacity block w-full mb-4"
+        >
+          Try Again
+        </button>
+        <Link 
+          href="/home" 
+          className="px-6 py-3 bg-gray-700 text-white rounded-lg hover:opacity-90 transition-opacity inline-block"
+        >
+          Go Back Home
+        </Link>
+      </div>
+    </div>
+  </div>
+);
+
+// Not found state component
+const NotFoundState = () => (
+  <div className="min-h-screen flex items-center justify-center">
+    <div className="text-center">
+      <h1 className="text-2xl font-bold text-white mb-4">Anime Not Found</h1>
+      <p className="text-gray-400 mb-6">The anime you&apos;re looking for doesn&apos;t exist or was removed.</p>
+      <Link href="/home" className="px-6 py-3 bg-[var(--primary)] text-[var(--background)] rounded-lg hover:opacity-90 transition-opacity">
+        Go Back Home
+      </Link>
+    </div>
+  </div>
+);
+
+// Main anime content component
+const AnimeContent = async ({ id }) => {
+  try {
+    console.log('[Server] Fetching info for ID:', id);
+    
+    const anime = await fetchAnimeInfo(id);
+    
+    console.log('[Server] API Response structure:', JSON.stringify({
+      info: anime.info ? 'Present' : 'Missing',
+      moreInfo: anime.moreInfo ? 'Present' : 'Missing',
+      relatedAnime: Array.isArray(anime.relatedAnime) ? anime.relatedAnime.length : 'Not an array',
+      recommendations: Array.isArray(anime.recommendations) ? anime.recommendations.length : 'Not an array',
+      seasons: Array.isArray(anime.seasons) ? anime.seasons.length : 'Not an array',
+      mostPopular: Array.isArray(anime.mostPopular) ? anime.mostPopular.length : 'Not an array',
+      promotionalVideos: anime.info?.promotionalVideos ? anime.info.promotionalVideos.length : 'Missing'
+    }, null, 2));
+    
+    if (!anime || !anime.info) {
+      console.error('[Server] Missing required anime data');
+      return <NotFoundState />;
+    }
+    
+    return (
+      <div className="min-h-screen pb-12 mt-1.5">
+        <AnimeDetails anime={anime} />
+      </div>
+    );
+  } catch (error) {
+    console.error('[Server Error]', error);
+    return <ErrorState error={error.message || 'An error occurred while loading the anime.'} />;
+  }
+};
+
+// Main page component with Suspense
+export default function AnimeInfoPage({ params }) {
+  const { id } = params;
+  
+  return (
+    <Suspense fallback={<LoadingState />}>
+      <AnimeContent id={id} />
+    </Suspense>
+  );
+}