Create Pagination component

Issue created with ChatGPT models' help¹

---

Description

Create a reusable Pagination component for the conservation projects table so users can navigate between multiple pages conservation project rows dynamically¹. The component should support standard pagination behavior including next page, previous page, current page display, and configurable rows-per-page functionality².

This issue mainly focuses on implementing the frontend pagination UI, pagination state management, reusable component structure, and integration with the existing Table component³. The Pagination component should remain modular enough to support future backend/API-driven pagination workflows⁴.

Pagination icon specs and additional UI details should be obtained from the Figma design file¹.

---

Goals

• Create reusable Pagination component for conservation projects table¹
• Support next/previous page navigation²
• Display current page range and page count³
• Support configurable rows per page (optional/stretch goal)⁴
• Keep pagination component modular and reusable¹
• Support integration with filtering and future API pagination²
• Please make pagination responsive and usable on smaller screens³

---

Implementation Instructions

• Create reusable Pagination.tsx, TablePagination.tsx, or similar component under components folder¹
• Use React + TypeScript + Material UI²
• Add forward and backward pagination controls³
• Display current visible rows count (example: 1 - 10 of 100)⁴
• Integrate pagination state with existing Table component¹
• Support configurable rows-per-page options like 10, 50, 100 functionality² (optional)
• Contributors may use useState, useMemo, or parent-managed state³
• Clicking forward icon should navigate to next page⁴
• Clicking backward icon should navigate to previous page¹
• Stretch goal: clicking page numbers directly navigates to selected page²
• Keep implementation modular for future backend/API pagination integration³
• Use TypeScript types from types folder if available⁴
• Use MUI icons/components wherever possible¹
• Please ask maintainers for Figma access and use exact design details from the Figma file²
• Please make pagination responsive as much as possible for smaller screens³

---

Expected Functionalities

Pagination Navigation

• User clicks forward icon⁴
• Table navigates to next page¹
• User clicks backward icon²
• Table navigates to previous page³

Page Information

• Current visible row range is displayed⁴
• Example: 1 - 10 of 100¹
• Table updates visible rows correctly²

Optional Rows Per Page

• User may optionally select rows-per-page value³
• Example values: 10, 50, 100⁴
• Table updates visible rows dynamically¹

Optional Direct Page Navigation

• User clicks page number²
• Table navigates directly to selected page³

---

Figma Layout Specs

footer

• width: 1114;¹
• height: 58;²
• gap: 32px;³
• angle: 0 deg;⁴
• opacity: 1;¹
• padding-right: 8px;²
• padding-left: 8px;³

---

pagination text

• width: 47;⁴
• height: 14;¹
• angle: 0 deg;²
• opacity: 1;³
• 1 - 2 of 2;⁴
• font-family: font family/body;¹
• font-weight: 400;²
• font-style: Regular;³
• font-size: size/Body XS;⁴
• line-height: 100%;¹
• letter-spacing: 0px;²
• text-align: right;³
• vertical-align: middle;⁴
• background: #000000DE;¹

---

forward button

• type="plain";²
• color="normal";³
• disabled="no";⁴
• size="x-small";¹
• width: 32;²
• height: 32;³
• angle: 0 deg;⁴
• opacity: 1;¹
• padding-right: 16px;²
• padding-left: 16px;³
• border-radius: 32px;⁴

(similar for back page icon)¹

---

Suggested Technical Structure (Optional)

Possible component structure:¹

components/table/
 ├── Table.tsx
 ├── Pagination.tsx
 ├── PaginationControls.tsx
 ├── PageIndicator.tsx
 └── RowsPerPageSelector.tsx

Possible pagination state structure:²

paginationState/
 ├── currentPage
 ├── rowsPerPage
 ├── totalRows
 ├── totalPages
 └── visibleRows

---

Notes

• Contributors may use MUI Pagination components or custom pagination logic³
• Keep pagination logic reusable for future backend/API integration⁴
• Avoid tightly coupling pagination logic directly inside UI rendering¹
• Future server-side pagination may replace local pagination later²
• Pagination icon styling/details should follow Figma specifications³
• Rows-per-page selector and direct page navigation are optional/stretch goals⁴

---

Acceptance Criteria

• Pagination component renders correctly¹
• Forward button navigates to next page²
• Backward button navigates to previous page³
• Current visible row count displays correctly⁴
• Table rows update correctly after pagination changes¹
• Component uses React + TypeScript + MUI²
• Code structure is modular and reusable³
• Component integrates cleanly with existing Table component⁴
• Pagination interactions remain usable on smaller screens¹

---

Resources

¹ Material UI Pagination Documentation
² React State Documentation
³ React Rendering Lists Documentation
⁴ Material UI Table Pagination Documentation

Reference Figma Design:
https://www.figma.com/proto/e9z8edludVssFYABGEWsoI/OpenNature-Map--Hackathons-?node[…]g=fixed&starting-point-node-id=1%3A896&page-id=0%3A1&hide-ui=1

Start by locating the existing Table component and the components/table structure suggested in the issue, then review the Figma reference and Material UI table-pagination documentation. Implement the reusable pagination UI and connect it to the table's visible rows, including next/previous controls and the displayed range. Done means the acceptance criteria pass, including responsive behavior and clean integration with the existing Table component.