(create) created searchbar component and styled it

commons/home.js

@@ -1,9 +1,21 @@
+import { useState } from "react";
+import Searchbar from "../components/searchbar";
 export default function Home({ posts }) {
+  const [search, setSearch] = useState("");
+  const filteredPosts =
+    search.length === 0
+      ? posts
+      : posts.filter((post) =>
+          post.title.toLowerCase().includes(search.toLowerCase())
+        );
+
   return (
     <div className="homepage">
+      <Searchbar search={search} setSearch={setSearch} />
+
       <h1 className="homepage_heading-1">Rehberler</h1>
       <div className="homepage_posts">
-        {posts.slice(0, 20).map((post) => (
+        {filteredPosts.slice(0, 20).map((post) => (
           <li key={post.id}>{post.title}</li>
         ))}
       </div>

components/searchbar.js

@@ -0,0 +1,11 @@
+export default function Searchbar({ search, setSearch }) {
+  return (
+    <input
+      className="searchbar"
+      type="text"
+      placeholder="Rehber ara"
+      value={search}
+      onChange={(e) => setSearch(e.target.value)}
+    />
+  );
+}

styles/components/searchbar.scss

@@ -0,0 +1,20 @@
+.searchbar {
+  align-self: center;
+  min-width: 30%;
+  margin-bottom: 1rem;
+
+  border: 1px solid var(--color-primary);
+  border-radius: 5px;
+  height: 3rem;
+  padding: 2px 2rem;
+  outline: 0;
+  background-color: var(--color-grey);
+
+  transition: all 0.2s;
+
+  &:hover,
+  &:focus {
+    border: 1.5px solid var(--color-tertiary);
+    background-color: var(--color-white);
+  }
+}

styles/globals.scss

@@ -10,6 +10,7 @@
 
 @import "./components/navbar";
 @import "./components/footer";
+@import "./components/searchbar";
 
 @import "./pages/homepage.scss";
 

styles/pages/homepage.scss

@@ -1,13 +1,15 @@
 .homepage {
-  font-size: 2rem;
-  list-style-type: none;
-  justify-items: center;
-
   display: grid;
   justify-content: center;
+  justify-items: center;
+
+  padding-top: 2rem;
+  font-size: 2rem;
+  list-style-type: none;
 
   &_heading-1 {
     text-align: center;
+    padding-top: 1rem;
   }
 
   &_posts {