some changes in details

ShivaBhattacharjee · Aug 22, 2023 · 226279e · 226279e
1 parent 1a6b469
commit 226279e
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 5 deletions.
diff --git a/src/app/details/[animeId]/page.tsx b/src/app/details/[animeId]/page.tsx
@@ -65,7 +65,6 @@ export default async function page({ params }: {
         <Suspense fallback={<div className='flex mt-5 justify-center items-center'>
           <SpinLoading />
         </div>}>
-          <h1 className=' text-4xl font-semibold'>Episodes</h1>
           <EpisodeLists listData={details.episodes} />
         </Suspense>
       </div>

diff --git a/src/components/shared/EpisodeLists.tsx b/src/components/shared/EpisodeLists.tsx
@@ -4,6 +4,7 @@ import { Frown } from "lucide-react";
 interface Anime {
   image: string;
   number: number;
+  title: string;
 }
 
 interface EpisodeListsProps {
@@ -13,22 +14,27 @@ interface EpisodeListsProps {
 const EpisodeLists: React.FC<EpisodeListsProps> = ({ listData }) => {
   return (
     <>
+      <div className="flex justify-between items-center">
+        <h1 className=' text-4xl font-semibold'>Episodes</h1>
+
+      </div>
       {listData.length > 0 ? (
         <div className='grid gap-4 max-h-64 overflow-y-scroll grid-cols-2 md:grid-cols-3 lg:grid-cols-4 2xl:grid-cols-6'>
           {listData
-            .slice()
+            .slice(0, 100)
             .sort((animeA, animeB) => animeA.number - animeB.number)
             .map((anime, index) => (
               <div className='bg-white/20 duration-200 border-white/20 hover:border-2 hover:scale-90 rounded-lg flex flex-col gap-3' key={index}>
-                <img src={anime.image} alt="anime" loading='lazy' className='rounded-t-lg cursor-pointer bg-cover' height={200} width={400} />
+                <img src={anime.image} alt={`an image of ${anime.title}`} loading='lazy' className='rounded-t-lg 
+                  border-b-2 border-white/30  cursor-pointer bg-cover' height={200} width={400} />
                 <h1 className='text-center font-semibold mb-3'>Episode: {anime.number}</h1>
               </div>
             ))}
         </div>
       ) : (
-        <div className='flex capitalize items-center justify-center text-3xl font-semibold mt-9 gap-3'>
+        <div className='flex capitalize items-center justify-center text-3xl font-semibold  gap-3'>
           <Frown />
-          <h1>Oops, No Episodes found!!</h1>
+          <h1>Coming Soon!!</h1>
         </div>
       )}
     </>