Create Pagination component

[SAUMILDHANKAR]

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](https://mui.com/material-ui/react-pagination/?utm_source=chatgpt.com)](https://mui.com/material-ui/react-pagination/?utm_source=chatgpt.com)
² [[React State Documentation](https://react.dev/learn/state-a-components-memory?utm_source=chatgpt.com)](https://react.dev/learn/state-a-components-memory?utm_source=chatgpt.com)
³ [[React Rendering Lists Documentation](https://react.dev/learn/rendering-lists?utm_source=chatgpt.com)](https://react.dev/learn/rendering-lists?utm_source=chatgpt.com)
⁴ [[Material UI Table Pagination Documentation](https://mui.com/material-ui/react-table/#pagination?utm_source=chatgpt.com)](https://mui.com/material-ui/react-table/#pagination?utm_source=chatgpt.com)

Reference Figma Design:
[[OpenNature Map Figma Design](https://www.figma.com/design/eRcnlUKzSsIJv3JcOMddwU/OpenNature-Map?node-id=5771-3944&t=PvHYPjlEBBF151A0-0&utm_source=chatgpt.com)](https://www.figma.com/design/eRcnlUKzSsIJv3JcOMddwU/OpenNature-Map?node-id=5771-3944&t=PvHYPjlEBBF151A0-0&utm_source=chatgpt.com)

---