From f3e5175de308dbfa64247fc91cabb86b89181188 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yusuf=20=C4=B0pek?= <yusufipek@protonmail.com>
Date: Sat, 7 Aug 2021 15:11:26 +0300
Subject: [PATCH] (create) created searchbar component and styled it

---
 commons/home.js                  | 14 +++++++++++++-
 components/searchbar.js          | 11 +++++++++++
 styles/components/searchbar.scss | 20 ++++++++++++++++++++
 styles/globals.scss              |  1 +
 styles/pages/homepage.scss       | 10 ++++++----
 5 files changed, 51 insertions(+), 5 deletions(-)
 create mode 100644 components/searchbar.js
 create mode 100644 styles/components/searchbar.scss

diff --git a/commons/home.js b/commons/home.js
index 7639b01..ae45f8e 100644
--- a/commons/home.js
+++ b/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>
diff --git a/components/searchbar.js b/components/searchbar.js
new file mode 100644
index 0000000..b624481
--- /dev/null
+++ b/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)}
+    />
+  );
+}
diff --git a/styles/components/searchbar.scss b/styles/components/searchbar.scss
new file mode 100644
index 0000000..5a88658
--- /dev/null
+++ b/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);
+  }
+}
diff --git a/styles/globals.scss b/styles/globals.scss
index 68815dc..f9652e9 100644
--- a/styles/globals.scss
+++ b/styles/globals.scss
@@ -10,6 +10,7 @@
 
 @import "./components/navbar";
 @import "./components/footer";
+@import "./components/searchbar";
 
 @import "./pages/homepage.scss";
 
diff --git a/styles/pages/homepage.scss b/styles/pages/homepage.scss
index 4360219..2228528 100644
--- a/styles/pages/homepage.scss
+++ b/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 {