feat: add searchbar for villagers

lib/data.ts

@@ -20,7 +20,7 @@ export const links = [
 ] as const;
 
 const api = 'https://api.nookipedia.com/';
-const apiKey = process.env.NEXT_NOOKIPEDIA_API_KEY; /*hard coding bc it doesnt work */
+const apiKey = ""; /*hard coding bc it doesnt work */
 
 /* Api Fetch Internal Function */
 async function getData(path) {

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

@@ -1,4 +1,4 @@
-import React from 'react'
+import React from "react"
 
 export default function page() {
   return (

src/app/(pages)/selling-items/page.jsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React from "react"
 
 export default function page() {
   return (

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

@@ -0,0 +1,17 @@
+import React from "react"
+
+export default function Search({ setSearch, setCurrentPage }) {
+  return (
+    <form className="mt-1 mb-3 mx-0 md:mx-5 text-center">
+			<input 
+				placeholder="Search for a villager..." 
+				type="text" 
+				className="w-[50vw] border border-red-300 p-2 rounded-lg shadow-lg"
+				onChange={ e => {
+					setSearch(e.target.value);
+					setCurrentPage(0);
+				} }
+			/>
+		</form>
+  )
+}

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

@@ -1,9 +1,10 @@
 "use client";
 
-import React, { useEffect, useState } from 'react'
-import { getVillagers } from '../../../../lib/data.ts'
-import Loading from '@/components/loading.jsx';
-import VillagerCard from './villagerCard.jsx';
+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";
 
 export default function Villagers() {
 
@@ -12,10 +13,10 @@ export default function Villagers() {
   const [pages, setPages] = useState();
   const [currentPage, setCurrentPage] = useState(0);
 
-  const [search, setSearch] = useState('');
-  const [gender, setGender] = useState('');
-  const [species, setSpecies] = useState('');
-  const [sign, setSign] = useState('');
+  const [search, setSearch] = useState("");
+  const [gender, setGender] = useState("");
+  const [species, setSpecies] = useState("");
+  const [sign, setSign] = useState("");
 
   useEffect(() => {
     const getData = async () => {
@@ -27,19 +28,20 @@ export default function Villagers() {
         const pages = Math.ceil(totalItems / 10);
         setPages(pages);
       } catch (error) {
-        console.error('Error fetching villagers:', error);
+        console.error("Error fetching villagers:", error);
       }
       setLoading(false);
     };
     getData();
   }, [search, gender, species, sign]);
 
   return (
-    <div className='my-3 md:my-6'>
-      <div id="title" className='text-red-300 text-center text-5xl font-bold mb-5'>
-        <h1>Villagers</h1>
+    <div className="my-3 md:my-6">
+      <div>
+        <h1 className="text-red-300 text-center text-5xl font-bold mb-5">Villagers</h1>
+        <Search setSearch={setSearch} setCurrentPage={setCurrentPage} />
       </div>
-      <div className='grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-5'>
+      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-5">
         {
           loading ? (<Loading />) : (<VillagerCard results={data[currentPage]} />)
         }

src/components/loading.jsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React from "react"
 
 export default function Loading() {
 	return (