feat: add villagers pagination

package.json

@@ -13,7 +13,8 @@
     "next": "14.0.3",
     "react": "^18",
     "react-dom": "^18",
-    "react-icons": "^4.12.0"
+    "react-icons": "^4.12.0",
+    "react-paginate": "^8.2.0"
   },
   "devDependencies": {
     "autoprefixer": "^10.0.1",

src/app/(pages)/villagers/(components)/pagination.jsx

@@ -0,0 +1,21 @@
+import React from "react";
+import ReactPaginate from "react-paginate";
+
+export default function Pagination({ pages, setCurrentPage }) {
+  return (
+    <ReactPaginate 
+      className="pagination my-4 flex justify-center gap2 md:gap-4"
+      previousLabel="Prev"
+      nextLabel="Next"
+      previousClassName="p-2 btn bg-lightgreen text-white"
+      nextClassName="p-2 btn bg-lightgreen text-white"
+      pageClassName="p-2 btn bg-lightgreen opacity-700 text-white"
+      pageLinkClassName=""
+      activeClassName="active !bg-red-300"
+      onPageChange={(data) =>{
+        setCurrentPage(data.selected);
+      }}
+      pageCount={pages}
+    />
+  )
+}

src/app/(pages)/villagers/(filters)/search.jsx → src/app/(pages)/villagers/(components)/search.jsx

@@ -2,7 +2,7 @@ import React from "react"
 
 export default function Search({ setSearch, setCurrentPage }) {
   return (
-    <form className="mt-1 mb-3 mx-0 md:mx-5 text-center">
+    <form className="mt-1 mb-10 mx-0 md:mx-5 text-center">
 			<input 
 				placeholder="Search for a villager..." 
 				type="text" 

src/app/(pages)/villagers/page.jsx

@@ -4,7 +4,8 @@ import React, { useEffect, useState } from "react"
 import { getVillagers } from "../../../../lib/data.ts"
 import Loading from "@/components/loading.jsx";
 import VillagerCard from "./villagerCard.jsx";
-import Search from "./(filters)/search.jsx";
+import Search from "./(components)/search.jsx";
+import Pagination from "./(components)/pagination.jsx";
 
 export default function Villagers() {
 
@@ -46,6 +47,7 @@ export default function Villagers() {
           loading ? (<Loading />) : (<VillagerCard results={data[currentPage]} />)
         }
       </div>
+      <Pagination pages={pages} setCurrentPage={setCurrentPage} />
     </div>
   )
 }

src/app/(pages)/villagers/villagerCard.jsx

@@ -10,7 +10,7 @@ export default function VillagerCard({ results }) {
 			let { id, image_url, islander, name, gender, species, birthday_day, birthday_month, sign, quote } = x;
 
 			return (
-				<div key={id} id="card-container" className="w-72 rounded-xl mb-5 flex flex-col  max-w-md p-4 text-center card-shadow">
+				<div key={id} id="card-container" className="w-80 rounded-xl mb-5 flex flex-col  max-w-md p-4 text-center card-shadow">
 					<div className="flex justify-center gap-4 text-sm">
 						<p><FaPaw className="inline-block me-1 h-4" />{species ? (species) : "No info"}</p>
 						<p><FaCakeCandles className="inline-block me-1 h-4" />{birthday_day ? (birthday_month + " " + birthday_day) : "No info"}</p>