fix: EpisodeGrid pagination display and temp ts type resolve by 'any'

src/lib/components/Button.tsx

@@ -53,7 +53,7 @@ export interface ButtonProps
 const Button: React.FC<ButtonProps> = ({
   className,
   variant,
-  size,
+  size = "small",
   icon,
   iconType,
   children,
@@ -66,7 +66,7 @@ const Button: React.FC<ButtonProps> = ({
           size === "large" ? "h-6 w-6" : "h-4 w-4"
         }`}
       >
-        <HeroIcon iconName={icon} type={iconType} />
+        <HeroIcon size={size} iconName={icon} type={iconType} />
       </div>
     ) : (
       ""

src/lib/components/EpisodeGrid.tsx

@@ -2,34 +2,58 @@ import { AnimatePresence, motion } from "framer-motion";
 import Chip from "./Chip";
 import IconButton from "./IconButton";
 import EpisodeCard from "./Cards/EpisodeCard";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
-const EpisodeGrid = ({ loadingSeasons, seasonDetails }: any) => {
-  const paginateBy = 8;
-  const [currentPage, setCurrentPage] = useState(0);
+const EpisodeGrid = ({ loadingSeasons, seasonDetails, tvDetails }: any) => {
+  const [currentPage, setCurrentPage] = useState(1);
+
+  const activeSeason = seasonDetails.season_number;
+  const seasons = tvDetails.seasons;
+  const episodesPerPage = 8;
+
+  const filteredSeasons = seasons.filter(
+    (season: any) => season.season_number !== 0
+  );
+
+  const currentSeason = seasons.find(
+    (season: any) => season.season_number === activeSeason
+  );
+
+  const totalPreviousEpisodes = filteredSeasons
+    .filter((season: any) => season.season_number < activeSeason)
+    .reduce((acc: any, season: any) => acc + season.episode_count, 0);
+
+  const totalPages = Math.ceil(currentSeason.episode_count / episodesPerPage);
 
   const handleNextPage = () => {
-    setCurrentPage((prevPage) =>
-      prevPage < Math.ceil(seasonDetails.episodes.length / paginateBy) - 1
-        ? prevPage + 1
-        : prevPage
-    );
+    if (currentPage < totalPages) {
+      setCurrentPage(currentPage + 1);
+    }
   };
 
   const handlePreviousPage = () => {
-    setCurrentPage((prevPage) => (prevPage > 0 ? prevPage - 1 : prevPage));
+    if (currentPage > 1) {
+      setCurrentPage(currentPage - 1);
+    }
   };
 
-  const startIndex = currentPage * paginateBy;
-  const endIndex = startIndex + paginateBy;
+  const startEpisode = (currentPage - 1) * episodesPerPage + 1;
+  const endEpisode = Math.min(
+    startEpisode + episodesPerPage - 1,
+    currentSeason.episode_count
+  );
+
+  useEffect(() => {
+    setCurrentPage(1);
+  }, [seasonDetails]);
   return (
     <>
       <div className="flex items-center justify-between">
         <div className="text-2xl font-semibold flex items-center space-x-2">
           <div>Episodes</div>
           <div className="mt-1">
             <Chip variant="secondary" size="medium">
-              23
+              {seasonDetails.episodes.length}
             </Chip>
           </div>
         </div>
@@ -38,18 +62,19 @@ const EpisodeGrid = ({ loadingSeasons, seasonDetails }: any) => {
             icon="ChevronLeftIcon"
             variant="secondary"
             onClick={handlePreviousPage}
-            disabled={currentPage === 0}
+            disabled={currentPage === 1}
             aria-label="Previous Page"
           />
-          <div className="h-8 w-24 flex-1 flex justify-center items-center bg-neutral-600/20 px-4 text-white/80 shadow-[inset_0_1px_0_0_#ffffff1a] rounded-xl">
-            {startIndex + 1} -{" "}
-            {Math.min(endIndex, seasonDetails.episodes.length)}
+          <div className="h-8 w-24 flex-1 text-xs flex justify-center items-center bg-neutral-600/20 px-4 text-white/80 shadow-[inset_0_1px_0_0_#ffffff1a] rounded-xl">
+            {totalPreviousEpisodes + startEpisode}
+            {"-"}
+            {totalPreviousEpisodes + endEpisode}
           </div>
           <IconButton
             icon="ChevronRightIcon"
             variant="secondary"
             onClick={handleNextPage}
-            disabled={endIndex >= seasonDetails.episodes.length}
+            disabled={currentPage === totalPages}
             aria-label="Next Page"
           />
         </div>
@@ -76,7 +101,7 @@ const EpisodeGrid = ({ loadingSeasons, seasonDetails }: any) => {
             className="grid grid-cols-3 xl:grid-cols-4 gap-5"
           >
             {seasonDetails.episodes
-              .slice(startIndex, endIndex)
+              .slice(startEpisode - 1, endEpisode)
               .map((episode: any, index: number) => (
                 <EpisodeCard
                   key={episode.id || index}

src/lib/pages/TvInfoPage.tsx

@@ -264,6 +264,7 @@ const TvInfoPage = () => {
           <EpisodeGrid
             loadingSeasons={loadingSeasons}
             seasonDetails={seasonDetails}
+            tvDetails={tv}
           />
         )}
       </div>

ts/tmp/movies.json

@@ -1061,7 +1061,7 @@
     "title": "Forrest Gump",
     "video": false,
     "vote_average": 8.475,
-    "vote_count": 26865
+    "vote_count": 26866
   },
   {
     "adult": false,