refactor time slots

app/home/(user)/_components/booking/booking-pagination.tsx

@@ -0,0 +1,113 @@
+import React from 'react';
+
+import { useTranslation } from 'react-i18next';
+
+import { Trans } from '@kit/ui/makerkit/trans';
+import { cn } from '@kit/ui/shadcn';
+import { Button } from '@kit/ui/shadcn/button';
+
+const BookingPagination = ({
+  totalPages,
+  setCurrentPage,
+  currentPage,
+}: {
+  totalPages: number;
+  setCurrentPage: (page: number) => void;
+  currentPage: number;
+}) => {
+  const { t } = useTranslation();
+
+  const generatePageNumbers = () => {
+    const pages = [];
+    const maxVisiblePages = 5;
+
+    if (totalPages <= maxVisiblePages) {
+      for (let i = 1; i <= totalPages; i++) {
+        pages.push(i);
+      }
+    } else {
+      if (currentPage <= 3) {
+        for (let i = 1; i <= 4; i++) {
+          pages.push(i);
+        }
+        pages.push('...');
+        pages.push(totalPages);
+      } else if (currentPage >= totalPages - 2) {
+        pages.push(1);
+        pages.push('...');
+        for (let i = totalPages - 3; i <= totalPages; i++) {
+          pages.push(i);
+        }
+      } else {
+        pages.push(1);
+        pages.push('...');
+        for (let i = currentPage - 1; i <= currentPage + 1; i++) {
+          pages.push(i);
+        }
+        pages.push('...');
+        pages.push(totalPages);
+      }
+    }
+
+    return pages;
+  };
+
+  if (totalPages === 0) {
+    return (
+      <div className="wrap text-muted-foreground flex size-full content-center-safe justify-center-safe">
+        <p>{t('booking:noResults')}</p>
+      </div>
+    );
+  }
+
+  return (
+    totalPages > 1 && (
+      <div className="flex items-center justify-between">
+        <div className="text-muted-foreground text-sm">
+          {t('common:pageOfPages', {
+            page: currentPage,
+            total: totalPages,
+          })}
+        </div>
+
+        <div className="flex items-center gap-1">
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => setCurrentPage(currentPage - 1)}
+            disabled={currentPage === 1}
+          >
+            <Trans i18nKey="common:previous" defaultValue="Previous" />
+          </Button>
+
+          {generatePageNumbers().map((page, index) => (
+            <Button
+              key={index}
+              variant={page === currentPage ? 'default' : 'outline'}
+              size="sm"
+              onClick={() => typeof page === 'number' && setCurrentPage(page)}
+              disabled={page === '...'}
+              className={cn(
+                'min-w-[2rem]',
+                page === '...' && 'cursor-default hover:bg-transparent',
+              )}
+            >
+              {page}
+            </Button>
+          ))}
+
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => setCurrentPage(currentPage + 1)}
+            disabled={currentPage === totalPages}
+          >
+            <Trans i18nKey="common:next" defaultValue="Next" />
+          </Button>
+        </div>
+      </div>
+    )
+  );
+};
+
+export default BookingPagination;