update search pagination

src/app/components/Pagination.tsx

@@ -2,6 +2,10 @@
 
 export function Pagination({ totalPages, currentPage, fileId, callBack }: any) {
 
+	if (totalPages === 0) {
+		return null;
+	}
+
 	const getVisiblePages = () => {
 		const pages = [];
 		const maxVisible = 7;
@@ -26,42 +30,40 @@ export function Pagination({ totalPages, currentPage, fileId, callBack }: any) {
 	const visiblePages = getVisiblePages();
 
 	return (
-		<div>
-			<div style={{ display: 'flex', gap: '5px', marginTop: '10px' }}>
-				{/* Кнопка первой страницы */}
-				{visiblePages[0] > 1 && (
-					<>
-						<button onClick={() => callBack(fileId, 1)}>1</button>
-						{visiblePages[0] > 2 && <span>...</span>}
-					</>
-				)}
-
-				{/* Видимые страницы */}
-				{visiblePages.map(page => (
+		<div className="pagination-wrapper">
+			{visiblePages[0] > 1 && (
+				<>
 					<button
-						key={page}
-						onClick={() => callBack(fileId, page)}
-						style={{
-							padding: '5px 10px',
-							border: '1px solid #ddd',
-							background: currentPage === page ? '#007bff' : 'white',
-							color: currentPage === page ? 'white' : 'black',
-							cursor: 'pointer',
-							fontWeight: currentPage === page ? 'bold' : 'normal'
-						}}
+						className={`pagination-button`}
+						onClick={() => callBack(fileId, 1, true)}
 					>
-						{page}
+						1
 					</button>
-				))}
+					{visiblePages[0] > 2 && <span>...</span>}
+				</>
+			)}
 
-				{/* Кнопка последней страницы */}
-				{visiblePages[visiblePages.length - 1] < totalPages && (
-					<>
-						{visiblePages[visiblePages.length - 1] < totalPages - 1 && <span>...</span>}
-						<button onClick={() => callBack(fileId, totalPages)}>{totalPages}</button>
-					</>
-				)}
-			</div>
+			{visiblePages.map(page => (
+				<button
+					key={page}
+					onClick={() => callBack(fileId, page, true)}
+					className={`pagination-button ${page === currentPage ? 'current-page' : ''}`}
+				>
+					{page}
+				</button>
+			))}
+
+			{visiblePages[visiblePages.length - 1] < totalPages && (
+				<>
+					{visiblePages[visiblePages.length - 1] < totalPages - 1 && <span>...</span>}
+					<button
+						className={`pagination-button`}
+						onClick={() => callBack(fileId, totalPages, true)}
+					>
+						{totalPages}
+					</button>
+				</>
+			)}
 		</div>
 	);
 }