From 8972fa32dd1b16b3f01d5c7cb98a5c320348ead3 Mon Sep 17 00:00:00 2001
From: ritiks236 <ritiks236@gmail.com>
Date: Sat, 26 Oct 2024 03:19:22 +0530
Subject: [PATCH] pagination fixed

---
 apps/web/components/Tracks.tsx | 46 +++++++++++++++++++++-------------
 1 file changed, 28 insertions(+), 18 deletions(-)

diff --git a/apps/web/components/Tracks.tsx b/apps/web/components/Tracks.tsx
index d9af482c..c2ef593c 100644
--- a/apps/web/components/Tracks.tsx
+++ b/apps/web/components/Tracks.tsx
@@ -128,11 +128,11 @@ export const Tracks = ({ tracks, categories }: TracksWithCategoriesProps) => {
       initial={{ y: -20, opacity: 0 }}
       animate={{ y: 0, opacity: 1 }}
       transition={{ duration: 0.5, ease: "easeInOut", type: "spring", damping: 10, delay: 0.5 }}
-      className="flex max-w-5xl flex-col gap-4 w-full mx-auto p-4"
+      className="mx-auto flex w-full max-w-5xl flex-col gap-4 p-4"
       id="tracks"
     >
-      <div className="flex w-full gap-4 justify-between items-center flex-col md:flex-row">
-        <div className="flex items-center gap-2 p-2 rounded-lg bg-primary/5 mx-auto md:mx-0 justify-center">
+      <div className="flex w-full flex-col items-center justify-between gap-4 md:flex-row">
+        <div className="bg-primary/5 mx-auto flex items-center justify-center gap-2 rounded-lg p-2 md:mx-0">
           <Button
             size={"lg"}
             variant={"ghost"}
@@ -141,7 +141,7 @@ export const Tracks = ({ tracks, categories }: TracksWithCategoriesProps) => {
           >
             Cohort 2.0
           </Button>
-          <Separator className="w-0.5 h-4 bg-primary/25" />
+          <Separator className="bg-primary/25 h-4 w-0.5" />
           <Button
             size={"lg"}
             variant={"ghost"}
@@ -151,9 +151,9 @@ export const Tracks = ({ tracks, categories }: TracksWithCategoriesProps) => {
             Cohort 3.0
           </Button>
         </div>
-        <div className="flex gap-2 p-2.5 bg-primary/5 rounded-lg w-full md:w-fit">
+        <div className="bg-primary/5 flex w-full gap-2 rounded-lg p-2.5 md:w-fit">
           {/* Filter by Categories */}
-          <div className="flex gap-2 items-center ">
+          <div className="flex items-center gap-2">
             <Select onValueChange={(e) => setSelectedCategory(e === "All" ? "" : e)}>
               <SelectTrigger className="w-[250px]">
                 <SelectValue placeholder={selectedCategory || "All"} />
@@ -187,12 +187,12 @@ export const Tracks = ({ tracks, categories }: TracksWithCategoriesProps) => {
       </div>
 
       {/* Tracks with Animation */}
-      <motion.ul className="flex flex-col gap-4 w-full" variants={trackAnimation} initial="hidden" animate="show">
+      <motion.ul className="flex w-full flex-col gap-4" variants={trackAnimation} initial="hidden" animate="show">
         {loading ? (
           Array.from({ length: tracksPerPage }).map((_, idx) => (
             <div
               key={idx}
-              className="flex items-center space-x-4 w-full h-24 bg-neutral-100 dark:bg-neutral-900 p-4 rounded-xl"
+              className="flex h-24 w-full items-center space-x-4 rounded-xl bg-neutral-100 p-4 dark:bg-neutral-900"
             >
               <Skeleton className="h-12 w-12 rounded-2xl" />
               <div className="space-y-2">
@@ -202,11 +202,11 @@ export const Tracks = ({ tracks, categories }: TracksWithCategoriesProps) => {
             </div>
           ))
         ) : visibleTracks.length === 0 ? (
-          <p className="text-center font-medium tracking-tighter text-lg max-w-screen-sm px-4 mx-auto">
+          <p className="mx-auto max-w-screen-sm px-4 text-center text-lg font-medium tracking-tighter">
             ☹️ Sorry - currently there are no tracks available.
           </p>
         ) : (
-          filteredTracks.map((t) => (
+          visibleTracks.map((t) => (
             <motion.li key={t.id} className="w-full" variants={{ hidden: { opacity: 0 }, show: { opacity: 1 } }}>
               <TrackCard2 track={t} />
             </motion.li>
@@ -216,7 +216,7 @@ export const Tracks = ({ tracks, categories }: TracksWithCategoriesProps) => {
 
       {/* Skeleton */}
       {filteredTracks.length < tracksPerPage && (
-        <div className="flex items-center space-x-4 w-full h-24 bg-neutral-100 dark:bg-neutral-900 p-4 rounded-xl">
+        <div className="flex h-24 w-full items-center space-x-4 rounded-xl bg-neutral-100 p-4 dark:bg-neutral-900">
           <Skeleton className="h-12 w-12 rounded-2xl" />
           <div className="space-y-2">
             <Skeleton className="h-4 w-[250px]" />
@@ -225,14 +225,20 @@ export const Tracks = ({ tracks, categories }: TracksWithCategoriesProps) => {
         </div>
       )}
       {/* Pagination Controls */}
-      <div className="flex justify-end items-end mt-4 w-full">
+      <div className="mt-4 flex w-full items-end justify-end">
         <Pagination>
           <PaginationContent>
-            <PaginationItem className="cursor-pointer">
+            <PaginationItem>
               <PaginationPrevious
+                aria-disabled={currentPage === 1}
                 onClick={() => {
-                  setCurrentPage((prev) => Math.max(prev - 1, 1));
+                  if (currentPage > 1) {
+                    setCurrentPage((prev) => prev - 1);
+                  }
                 }}
+                className={`cursor-pointer ${
+                  currentPage === 1 ? "pointer-events-none cursor-not-allowed opacity-50" : ""
+                }`}
               />
             </PaginationItem>
             {Array.from({ length: totalPages }).map((_, index) => (
@@ -248,13 +254,17 @@ export const Tracks = ({ tracks, categories }: TracksWithCategoriesProps) => {
               </>
             )}
 
-            <PaginationItem
-            className="cursor-pointer"
-            >
+            <PaginationItem>
               <PaginationNext
+                aria-disabled={currentPage === totalPages}
                 onClick={() => {
-                  setCurrentPage((prev) => Math.min(prev + 1, totalPages));
+                  if (currentPage < totalPages) {
+                    setCurrentPage((prev) => prev + 1);
+                  }
                 }}
+                className={`cursor-pointer ${
+                  currentPage === totalPages ? "pointer-events-none cursor-not-allowed opacity-50" : ""
+                }`}
               />
             </PaginationItem>
           </PaginationContent>