feat: creats frontend for the project

frontend/src/components/Pagination.tsx

@@ -0,0 +1,58 @@
+interface Props {
+  page: number;
+  pageSize: number;
+  totalItems: number;
+  totalPages: number;
+  onPageChange: (page: number) => void;
+  onPageSizeChange: (size: number) => void;
+}
+
+export function Pagination({
+  page,
+  pageSize,
+  totalItems,
+  totalPages,
+  onPageChange,
+  onPageSizeChange,
+}: Props) {
+  const from = (page - 1) * pageSize + 1;
+  const to = Math.min(page * pageSize, totalItems);
+
+  return (
+    <div className="pagination">
+      <div className="pagination-info">
+        {totalItems > 0
+          ? `Показано ${from}–${to} из ${totalItems}`
+          : 'Нет записей'}
+      </div>
+      <div className="pagination-controls">
+        <select
+          className="pagination-size"
+          value={pageSize}
+          onChange={(e) => onPageSizeChange(Number(e.target.value))}
+        >
+          <option value={10}>10</option>
+          <option value={50}>50</option>
+          <option value={100}>100</option>
+        </select>
+        <button
+          className="btn-page"
+          disabled={page <= 1}
+          onClick={() => onPageChange(page - 1)}
+        >
+          &larr;
+        </button>
+        <span className="pagination-current">
+          {page} / {totalPages || 1}
+        </span>
+        <button
+          className="btn-page"
+          disabled={page >= totalPages}
+          onClick={() => onPageChange(page + 1)}
+        >
+          &rarr;
+        </button>
+      </div>
+    </div>
+  );
+}