implement pagination

frontend/app/(urls)/search/components/Pagination.tsx

@@ -0,0 +1,91 @@
+'use client'
+
+import React from 'react'
+
+interface PaginationProps {
+  currentPage: number
+  totalPages: number
+  hasNext: boolean
+  hasPrevious: boolean
+  isLoading: boolean
+  onPageChange: (page: number) => void
+}
+
+export default function Pagination({
+  currentPage,
+  totalPages,
+  isLoading,
+  onPageChange,
+}: PaginationProps) {
+  if (totalPages <= 1) return null
+
+  const renderPageNumbers = () => {
+    const pages = []
+    const maxVisiblePages = 5 // максимальное количество видимых страниц
+
+    // создаем кнопки страницы
+    const createPageButton = (pageNum: number) => (
+      <button
+        key={pageNum}
+        onClick={() => onPageChange(pageNum)}
+        disabled={isLoading || pageNum === currentPage}
+        className={`h-8 w-8 rounded-full ${
+          pageNum === currentPage
+            ? 'bg-orange/80 text-white'
+            : 'bg-white text-gray-700 hover:bg-gray-100'
+        } flex items-center justify-center border text-sm font-medium transition-colors`}
+      >
+        {pageNum}
+      </button>
+    )
+
+    // всегда показываем первую страницу
+    pages.push(createPageButton(1))
+
+    if (totalPages <= maxVisiblePages) {
+      // если страниц мало, показываем все
+      for (let i = 2; i <= totalPages; i++) {
+        pages.push(createPageButton(i))
+      }
+    } else {
+      // если страниц много, показываем с многоточием
+      if (currentPage > 3) {
+        pages.push(
+          <span key="start-ellipsis" className="px-2">
+            ...
+          </span>
+        )
+      }
+
+      // показываем страницы вокруг текущей
+      for (
+        let i = Math.max(2, currentPage - 1);
+        i <= Math.min(totalPages - 1, currentPage + 1);
+        i++
+      ) {
+        pages.push(createPageButton(i))
+      }
+
+      if (currentPage < totalPages - 2) {
+        pages.push(
+          <span key="end-ellipsis" className="px-2">
+            ...
+          </span>
+        )
+      }
+
+      // всегда показываем последнюю страницу
+      if (totalPages > 1) {
+        pages.push(createPageButton(totalPages))
+      }
+    }
+
+    return pages
+  }
+
+  return (
+    <div className="mt-6 flex items-center justify-center">
+      <div className="flex space-x-2">{renderPageNumbers()}</div>
+    </div>
+  )
+}