update

Frontend/src/features/rooms/components/Pagination.tsx

@@ -0,0 +1,141 @@
+import React from 'react';
+import { useSearchParams } from 'react-router-dom';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+
+interface PaginationProps {
+  currentPage: number;
+  totalPages: number;
+  onPageChange?: (page: number) => void;
+}
+
+const Pagination: React.FC<PaginationProps> = ({
+  currentPage,
+  totalPages,
+  onPageChange,
+}) => {
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  const handlePageChange = (page: number) => {
+    if (page < 1 || page > totalPages) return;
+
+    
+    const newParams = new URLSearchParams(searchParams);
+    newParams.set('page', String(page));
+    setSearchParams(newParams);
+
+    
+    onPageChange?.(page);
+
+    
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  };
+
+  
+  const getPageNumbers = () => {
+    const pages: (number | string)[] = [];
+    const maxVisible = 7; 
+
+    if (totalPages <= maxVisible) {
+      
+      for (let i = 1; i <= totalPages; i++) {
+        pages.push(i);
+      }
+    } else {
+      
+      pages.push(1);
+
+      if (currentPage > 3) {
+        pages.push('...');
+      }
+
+      
+      const start = Math.max(2, currentPage - 1);
+      const end = Math.min(totalPages - 1, currentPage + 1);
+
+      for (let i = start; i <= end; i++) {
+        pages.push(i);
+      }
+
+      if (currentPage < totalPages - 2) {
+        pages.push('...');
+      }
+
+      
+      pages.push(totalPages);
+    }
+
+    return pages;
+  };
+
+  if (totalPages <= 1) {
+    return null;
+  }
+
+  return (
+    <div className="flex justify-center items-center gap-2 mt-8">
+      {}
+      <button
+        onClick={() => handlePageChange(currentPage - 1)}
+        disabled={currentPage === 1}
+        className="px-4 py-2 border border-[#d4af37]/30 
+          rounded-lg bg-[#0a0a0a] text-gray-300
+          hover:bg-[#1a1a1a] hover:border-[#d4af37] hover:text-[#d4af37]
+          disabled:opacity-50 disabled:cursor-not-allowed 
+          transition-all duration-300 font-medium tracking-wide"
+        aria-label="Previous page"
+      >
+        <ChevronLeft size={18} />
+      </button>
+
+      {}
+      {getPageNumbers().map((page, index) => {
+        if (page === '...') {
+          return (
+            <span
+              key={`ellipsis-${index}`}
+              className="px-4 py-2 text-gray-500 font-light"
+            >
+              ...
+            </span>
+          );
+        }
+
+        const pageNum = page as number;
+        const isActive = pageNum === currentPage;
+
+        return (
+          <button
+            key={pageNum}
+            onClick={() => handlePageChange(pageNum)}
+            className={`px-5 py-2 rounded-lg transition-all duration-300 
+              font-medium tracking-wide ${
+                isActive
+                  ? 'bg-gradient-to-r from-[#d4af37] to-[#c9a227] text-[#0f0f0f] shadow-lg shadow-[#d4af37]/30'
+                  : 'border border-[#d4af37]/30 bg-[#0a0a0a] text-gray-300 hover:bg-[#1a1a1a] hover:border-[#d4af37] hover:text-[#d4af37]'
+              }`}
+            aria-label={`Page ${pageNum}`}
+            aria-current={isActive ? 'page' : undefined}
+          >
+            {pageNum}
+          </button>
+        );
+      })}
+
+      {}
+      <button
+        onClick={() => handlePageChange(currentPage + 1)}
+        disabled={currentPage === totalPages}
+        className="px-4 py-2 border border-[#d4af37]/30 
+          rounded-lg bg-[#0a0a0a] text-gray-300
+          hover:bg-[#1a1a1a] hover:border-[#d4af37] hover:text-[#d4af37]
+          disabled:opacity-50 disabled:cursor-not-allowed 
+          transition-all duration-300 font-medium tracking-wide"
+        aria-label="Next page"
+      >
+        <ChevronRight size={18} />
+      </button>
+    </div>
+  );
+};
+
+export default Pagination;