Refactor Pagination component to include dynamic page navigation

client/app/components/Pagination/index.jsx

@@ -1,25 +1,57 @@
+'use client';
+
 import { motion } from 'framer-motion';
-import Tooltip from '@/app/components/Tooltip';
 import { CgChevronLeft, CgChevronRight } from 'react-icons/cg';
+import { useEffect, useRef, useState } from 'react';
+import cn from '@/lib/cn';
 
-export default function Pagination({ page, next, previous, maxReached, loading }) {
-  return !loading ? (
-    <motion.div className='flex items-center mt-6' initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}>
-      <Tooltip content={page <= 1 ? null : `Go back to page ${page - 1}`}>
-        <button className='border-y border-l border-primary text-sm h-[38px] px-3 font-medium rounded-l-md bg-secondary text-secondary hover:bg-tertiary disabled:cursor-default disabled:opacity-70 flex items-center gap-x-1.5' onClick={() => !(page <= 1 || loading) && previous()} disabled={page <= 1 || loading}>
-          <CgChevronLeft />
-        </button>
-      </Tooltip>
+export default function Pagination({ page, setPage, loading, total, limit }) {
+
+  const totalPages = Math.ceil(total / limit);
+  const pagesToShow = 2;
+  const start = Math.max(1, page - pagesToShow);
+  const end = Math.min(totalPages, page + pagesToShow);
+  const pages = Array.from({ length: end - start + 1 }, (_, i) => start + i);
 
-      <span className='h-[38px] px-3 items-center flex text-sm font-semibold border pointer-events-none opacity-70 text-secondary bg-secondary border-x border-primary'>
-        Page {page}
-      </span>
+  return (
+    <motion.div 
+      className={cn(
+        'flex items-center p-2 mt-6 overflow-hidden rounded-lg bg-secondary gap-x-2',
+        pages.length === 0 && 'hidden'
+      )} 
+      initial={{ opacity: 0, y: 50 }}
+      animate={{ opacity: 1, y: 0 }}
+      exit={{ opacity: 0, y: 50 }} 
+    >
+      <button 
+        className='select-none items-center w-[28px] h-[28px] flex justify-center text-lg font-semibold rounded bg-quaternary disabled:pointer-events-none dark:hover:text-black dark:hover:bg-white hover:bg-black hover:text-white'
+        onClick={() => setPage(page - 1)}
+        disabled={loading || page === 1}
+      >
+        <CgChevronLeft />
+      </button>
 
-      <Tooltip content={maxReached ? null : `Go to page ${page + 1}`}>
-        <button className='h-[38px] border-y border-r border-primary text-sm px-3 font-medium rounded-r-md bg-secondary text-secondary hover:bg-tertiary disabled:cursor-default disabled:opacity-70 flex items-center gap-x-1.5' onClick={() => !(maxReached || loading) && next()} disabled={maxReached || loading}>
-          <CgChevronRight />
+      {pages.map(pageNumber => (
+        <button
+          key={pageNumber}
+          className={cn(
+            'select-none items-center flex justify-center w-[28px] h-[28px] text-sm font-semibold rounded text-tertiary hover:text-primary',
+            pageNumber === page && 'bg-quaternary text-primary'
+          )}
+          onClick={() => setPage(pageNumber)}
+          disabled={loading || pageNumber === page}
+        >
+          {pageNumber}
         </button>
-      </Tooltip>
+      ))}
+
+      <button
+        className='select-none items-center w-[28px] h-[28px] flex justify-center text-lg font-semibold rounded bg-quaternary disabled:pointer-events-none dark:hover:text-black dark:hover:bg-white hover:bg-black hover:text-white'
+        onClick={() => setPage(page + 1)}
+        disabled={loading || page === totalPages}
+      >
+        <CgChevronRight />
+      </button>
     </motion.div>
-  ) : null;
+  )
 }