ana sayfa stili değiştirildi ve sayfa numaraları eklendi.

commons/home.js

@@ -1,23 +1,51 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import Searchbar from "../components/searchbar";
 import Link from "next/link";
 
 export default function Home({ rehberler }) {
   const [search, setSearch] = useState("");
-  const filteredPosts =
-    search.length === 0
-      ? rehberler
-      : rehberler.filter((rehber) =>
-          rehber.fields.title.toLowerCase().includes(search.toLowerCase())
-        );
+  const [posts, setPosts] = useState([]);
+  const [currentPage, setCurrentPage] = useState(1);
+  const [postsPerPage] = useState(15);
+
+  const indexOfLastPost = currentPage * postsPerPage;
+  const indexOfFirstPost = indexOfLastPost - postsPerPage;
+  const currentPosts = posts.slice(indexOfFirstPost, indexOfLastPost);
+
+  const pageNumbers = [];
+  for (let i = 1; i <= Math.ceil(rehberler.length / postsPerPage); i++) {
+    pageNumbers.push(i);
+  }
+
+  const paginate = (pageNumber) => setCurrentPage(pageNumber);
+
+  useEffect(() => {
+    const fetchPosts = async () => {
+      let filteredPosts =
+        search.length === 0
+          ? rehberler
+          : rehberler.filter((rehber) =>
+              rehber.fields.title.toLowerCase().includes(search.toLowerCase())
+            );
+
+      setCurrentPage(1);
+      setPosts(filteredPosts);
+    };
+
+    fetchPosts();
+  }, [search.length]);
 
   return (
     <div className="homepage">
-      <Searchbar search={search} setSearch={setSearch} />
-
       <h1>Rehberler</h1>
+      <Searchbar
+        className="homepage_searchbar"
+        search={search}
+        setSearch={setSearch}
+      />
+
       <div className="homepage_posts">
-        {filteredPosts.slice(0, 21).map((rehber) => (
+        {currentPosts.map((rehber) => (
           <li key={rehber.fields.title}>
             <Link href={`/rehber/${rehber.fields.slug}`}>
               {rehber.fields.title}
@@ -25,6 +53,14 @@ export default function Home({ rehberler }) {
           </li>
         ))}
       </div>
+
+      <ul className="homepage_pagination">
+        {pageNumbers.map((number) => (
+          <a onClick={() => paginate(number)} key={number}>
+            {number}
+          </a>
+        ))}
+      </ul>
     </div>
   );
 }