From 90dfa8f17161d04a5de18c70dfd233ad27c942a0 Mon Sep 17 00:00:00 2001
From: Maksym Kolomiiets <maksymkolomiiets2@gmail.com>
Date: Sat, 14 Feb 2026 20:49:42 +0100
Subject: [PATCH 1/3] add task solution

---
 README.md                                |   4 +-
 package-lock.json                        |   9 +-
 package.json                             |   2 +-
 src/App.tsx                              | 103 +++++++----------------
 src/components/Pagination/Pagination.tsx |  78 ++++++++++++++++-
 5 files changed, 115 insertions(+), 81 deletions(-)

diff --git a/README.md b/README.md
index be8a8c6b6..d49c15911 100644
--- a/README.md
+++ b/README.md
@@ -2,7 +2,7 @@
 
 > Here is the [working version](https://mate-academy.github.io/react_pagination/)
 
-You a given a list of items and markup for the `Pagination`. Implement the 
+You a given a list of items and markup for the `Pagination`. Implement the
 `Pagination` as a stateless component to show only the items for a current page.
 
 1. The `Pagination` should be used with the next props:
@@ -32,4 +32,4 @@ You a given a list of items and markup for the `Pagination`. Implement the
 - Implement a solution following the [React task guideline](https://github.com/mate-academy/react_task-guideline#react-tasks-guideline).
 - Use the [React TypeScript cheat sheet](https://mate-academy.github.io/fe-program/js/extra/react-typescript).
 - Open one more terminal and run tests with `npm test` to ensure your solution is correct.
-- Replace `<your_account>` with your Github username in the [DEMO LINK](https://<your_account>.github.io/react_pagination/) and add it to the PR description.
+- Replace `<your_account>` with your Github username in the [DEMO LINK](https://maksymkolomiiets2-svg.github.io/react_pagination/) and add it to the PR description.
diff --git a/package-lock.json b/package-lock.json
index bc04a7602..7fed12e13 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,7 +19,7 @@
       },
       "devDependencies": {
         "@cypress/react18": "^2.0.1",
-        "@mate-academy/scripts": "^1.9.12",
+        "@mate-academy/scripts": "^2.1.3",
         "@mate-academy/students-ts-config": "*",
         "@mate-academy/stylelint-config": "*",
         "@types/node": "^20.14.10",
@@ -1183,10 +1183,11 @@
       }
     },
     "node_modules/@mate-academy/scripts": {
-      "version": "1.9.12",
-      "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-1.9.12.tgz",
-      "integrity": "sha512-/OcmxMa34lYLFlGx7Ig926W1U1qjrnXbjFJ2TzUcDaLmED+A5se652NcWwGOidXRuMAOYLPU2jNYBEkKyXrFJA==",
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-2.1.3.tgz",
+      "integrity": "sha512-a07wHTj/1QUK2Aac5zHad+sGw4rIvcNl5lJmJpAD7OxeSbnCdyI6RXUHwXhjF5MaVo9YHrJ0xVahyERS2IIyBQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@octokit/rest": "^17.11.2",
         "@types/get-port": "^4.2.0",
diff --git a/package.json b/package.json
index f412fefe6..617386d19 100644
--- a/package.json
+++ b/package.json
@@ -15,7 +15,7 @@
   },
   "devDependencies": {
     "@cypress/react18": "^2.0.1",
-    "@mate-academy/scripts": "^1.9.12",
+    "@mate-academy/scripts": "^2.1.3",
     "@mate-academy/students-ts-config": "*",
     "@mate-academy/stylelint-config": "*",
     "@types/node": "^20.14.10",
diff --git a/src/App.tsx b/src/App.tsx
index 189a990c8..f89a3d4d6 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,17 +1,25 @@
-import React from 'react';
+import React, { useState } from 'react';
 import './App.css';
 import { getNumbers } from './utils';
+import { Pagination } from './components/Pagination';
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const items = getNumbers(1, 42).map(n => `Item ${n}`);
 
 export const App: React.FC = () => {
+  const [amount, setAmount] = useState(5);
+  const [currentPage, setCurrentPage] = useState(1);
+  const total = 42;
+  const pages = Math.ceil(total / amount);
+  const end = currentPage !== pages ? currentPage * amount : total;
+  const start = amount * (currentPage - 1) + 1;
+
   return (
     <div className="container">
       <h1>Items with Pagination</h1>
 
       <p className="lead" data-cy="info">
-        Page 1 (items 1 - 5 of 42)
+        Page {currentPage} (items {start} - {end} of {total})
       </p>
 
       <div className="form-group row">
@@ -19,7 +27,13 @@ export const App: React.FC = () => {
           <select
             data-cy="perPageSelector"
             id="perPageSelector"
-            className="form-control">
+            className="form-control"
+            value={amount}
+            onChange={e => {
+              setAmount(Number(e.target.value));
+              setCurrentPage(1);
+            }}
+          >
             <option value="3">3</option>
             <option value="5">5</option>
             <option value="10">10</option>
@@ -33,77 +47,20 @@ export const App: React.FC = () => {
       </div>
 
       {/* Move this markup to Pagination */}
-      <ul className="pagination">
-        <li className="page-item disabled">
-          <a
-            data-cy="prevLink"
-            className="page-link"
-            href="#prev"
-            aria-disabled="true">
-            «
-          </a>
-        </li>
-        <li className="page-item active">
-          <a data-cy="pageLink" className="page-link" href="#1">
-            1
-          </a>
-        </li>
-        <li className="page-item">
-          <a data-cy="pageLink" className="page-link" href="#2">
-            2
-          </a>
-        </li>
-        <li className="page-item">
-          <a data-cy="pageLink" className="page-link" href="#3">
-            3
-          </a>
-        </li>
-        <li className="page-item">
-          <a data-cy="pageLink" className="page-link" href="#4">
-            4
-          </a>
-        </li>
-        <li className="page-item">
-          <a data-cy="pageLink" className="page-link" href="#5">
-            5
-          </a>
-        </li>
-        <li className="page-item">
-          <a data-cy="pageLink" className="page-link" href="#6">
-            6
-          </a>
-        </li>
-        <li className="page-item">
-          <a data-cy="pageLink" className="page-link" href="#7">
-            7
-          </a>
-        </li>
-        <li className="page-item">
-          <a data-cy="pageLink" className="page-link" href="#8">
-            8
-          </a>
-        </li>
-        <li className="page-item">
-          <a data-cy="pageLink" className="page-link" href="#9">
-            9
-          </a>
-        </li>
-        <li className="page-item">
-          <a
-            data-cy="nextLink"
-            className="page-link"
-            href="#next"
-            aria-disabled="false">
-            »
-          </a>
-        </li>
-      </ul>
+      <Pagination
+        total={total}
+        perPage={amount}
+        currentPage={currentPage}
+        onPageChange={newPage => {
+          setCurrentPage(newPage);
+        }}
+      />
       <ul>
-        <li data-cy="item">Item 1</li>
-        <li data-cy="item">Item 2</li>
-        <li data-cy="item">Item 3</li>
-        <li data-cy="item">Item 4</li>
-        <li data-cy="item">Item 5</li>
+        {getNumbers(start, end).map(n => (
+          <li key={n} data-cy="item">
+            Item {n}
+          </li>
+        ))}
       </ul>
     </div>
   );
diff --git a/src/components/Pagination/Pagination.tsx b/src/components/Pagination/Pagination.tsx
index e417a09fc..5af195492 100644
--- a/src/components/Pagination/Pagination.tsx
+++ b/src/components/Pagination/Pagination.tsx
@@ -1 +1,77 @@
-export const Pagination = () => {};
+import React from 'react';
+import { getNumbers } from '../../utils';
+
+interface Props {
+  total: number;
+  perPage: number;
+  currentPage?: number;
+  onPageChange: (page: number) => void;
+}
+
+export const Pagination: React.FC<Props> = ({
+  total,
+  perPage,
+  currentPage = 1,
+  onPageChange,
+}) => {
+  const pages = Math.ceil(total / perPage);
+
+  return (
+    <ul className="pagination">
+      <li className={currentPage === 1 ? 'page-item disabled' : 'page-item'}>
+        <a
+          data-cy="prevLink"
+          className="page-link"
+          href="#prev"
+          aria-disabled={currentPage === 1 ? 'true' : 'false'}
+          onClick={e => {
+            e.preventDefault();
+            if (currentPage > 1) {
+              onPageChange(currentPage - 1);
+            }
+          }}
+        >
+          «
+        </a>
+      </li>
+      {getNumbers(1, pages).map(num => (
+        <li
+          className={`page-item ${currentPage === num ? 'active' : ''}`}
+          key={num}
+        >
+          <a
+            data-cy="pageLink"
+            className="page-link"
+            href={`#${num}`}
+            onClick={e => {
+              e.preventDefault();
+              if (currentPage !== num) {
+                onPageChange(num);
+              }
+            }}
+          >
+            {num}
+          </a>
+        </li>
+      ))}
+      <li
+        className={currentPage === pages ? 'page-item disabled' : 'page-item'}
+      >
+        <a
+          data-cy="nextLink"
+          className="page-link"
+          href="#next"
+          aria-disabled={currentPage === pages ? 'true' : 'false'}
+          onClick={e => {
+            e.preventDefault();
+            if (currentPage < pages) {
+              onPageChange(currentPage + 1);
+            }
+          }}
+        >
+          »
+        </a>
+      </li>
+    </ul>
+  );
+};

From 0e19e8cd967fe0fccb3a689352620f625b9c1f47 Mon Sep 17 00:00:00 2001
From: Maksym Kolomiiets <maksymkolomiiets2@gmail.com>
Date: Sat, 14 Feb 2026 23:26:29 +0100
Subject: [PATCH 2/3] add task solution

---
 src/App.tsx                              | 3 +--
 src/components/Pagination/Pagination.tsx | 4 ++--
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index f89a3d4d6..40c0ea51d 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -10,8 +10,7 @@ export const App: React.FC = () => {
   const [amount, setAmount] = useState(5);
   const [currentPage, setCurrentPage] = useState(1);
   const total = 42;
-  const pages = Math.ceil(total / amount);
-  const end = currentPage !== pages ? currentPage * amount : total;
+  const end = Math.min(currentPage * amount, total);
   const start = amount * (currentPage - 1) + 1;
 
   return (
diff --git a/src/components/Pagination/Pagination.tsx b/src/components/Pagination/Pagination.tsx
index 5af195492..c8e5212ce 100644
--- a/src/components/Pagination/Pagination.tsx
+++ b/src/components/Pagination/Pagination.tsx
@@ -5,7 +5,7 @@ interface Props {
   total: number;
   perPage: number;
   currentPage?: number;
-  onPageChange: (page: number) => void;
+  onPageChange: (pages: number) => void;
 }
 
 export const Pagination: React.FC<Props> = ({
@@ -22,7 +22,7 @@ export const Pagination: React.FC<Props> = ({
         <a
           data-cy="prevLink"
           className="page-link"
-          href="#prev"
+          href="#"
           aria-disabled={currentPage === 1 ? 'true' : 'false'}
           onClick={e => {
             e.preventDefault();

From 98e6ae3e82d583680123700380f8271f3492ab99 Mon Sep 17 00:00:00 2001
From: Maksym Kolomiiets <maksymkolomiiets2@gmail.com>
Date: Sat, 14 Feb 2026 23:35:17 +0100
Subject: [PATCH 3/3] add task solution

---
 src/App.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/App.tsx b/src/App.tsx
index 40c0ea51d..a31df544f 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -51,7 +51,8 @@ export const App: React.FC = () => {
         perPage={amount}
         currentPage={currentPage}
         onPageChange={newPage => {
-          setCurrentPage(newPage);
+        setCurrentPage(newPage);
+        setSearchParams({ page: String(newPage), perPage: String(amount) });
         }}
       />
       <ul>