Merge search feature to master

@@ -71,4 +71,14 @@ export const createComment = async (id, content) => {
         throw new Error('Failed to create comment!');
         throw new Error('Failed to create comment!');
     }
     }
     return response.data;
     return response.data;
+}
+
+export const searchPost = async (search) => {
+    const response = await axios.post(`${SERVER_BASE_URL}/post/search/`, {
+        search,
+    });
+    if (response.status !== 200 && response.status !== 201) {
+        throw new Error('Failed to get posts!');
+    }
+    return response.data;
 }
 }
\ No newline at end of file

@@ -2,7 +2,7 @@ import {
     HomeIcon,
     HomeIcon,
     SearchIcon,
     SearchIcon,
     UserIcon,
     UserIcon,
-    CubeIcon,
+    TerminalIcon,
     MailIcon,
     MailIcon,
     StarIcon
     StarIcon
 } from "@heroicons/react/outline"
 } from "@heroicons/react/outline"
@@ -17,13 +17,13 @@ function Header() {
         <header className="flex flex-col sm:flex-row m-5 mt-0 pt-5 justify-between items-center">
         <header className="flex flex-col sm:flex-row m-5 mt-0 pt-5 justify-between items-center">
             <Link href="/" passHref>
             <Link href="/" passHref>
                 <div className="flex cursor-pointer transform hover:scale-105">
                 <div className="flex cursor-pointer transform hover:scale-105">
-                    <CubeIcon className="h-20" />
+                    <TerminalIcon className="h-20" />
                     <p className="text-7xl font-extrabold" >Learn In Web</p>
                     <p className="text-7xl font-extrabold" >Learn In Web</p>
                 </div></Link>
                 </div></Link>
             <div className="flex flex-grow justify-evenly max-w-sm">
             <div className="flex flex-grow justify-evenly max-w-sm">
                 <HeaderItem title='HOME' Icon={HomeIcon} link="/" />
                 <HeaderItem title='HOME' Icon={HomeIcon} link="/" />
                 <HeaderItem title='STAR' Icon={StarIcon} link="/" />
                 <HeaderItem title='STAR' Icon={StarIcon} link="/" />
-                <HeaderItem title='SEARCH' Icon={SearchIcon} link="/" />
+                <HeaderItem title='SEARCH' Icon={SearchIcon} link="/search/" />
                 <HeaderItem title='ACCOUNT' Icon={UserIcon} link="/" />
                 <HeaderItem title='ACCOUNT' Icon={UserIcon} link="/" />
                 <Islogin />
                 <Islogin />
             </div>
             </div>

+import { searchPost } from "../api/post/post";
+import { useState } from "react";
+import { SearchIcon } from "@heroicons/react/outline";
+
+export default function Search() {
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        const search = await searchPost(e.target.search.value);
+        console.log(search)
+        setResult(search);
+    }
+
+    const [result, setResult] = useState([]);
+
+    return (
+        <div className=" ml-10 mr-10">
+            <form onSubmit={handleSubmit}>
+                <input name="search" id="search" placeholder="Search Something..." className="w-[90%] h-10 text-xl"></input>
+                <button type="submit">
+                    <SearchIcon className="h-10 ml-2 -mb-3 rounded-full border-black border-2 p-1" />
+                </button>
+            </form>
+            <div>
+                <h1 className="text-2xl font-bold">Search Result</h1>
+                {result.map((post) => {
+                    return (
+                        <div>
+                            <h2>{post.title}</h2>
+                        </div>
+                    )
+                })}
+            </div>
+        </div>
+    );
+}
\ No newline at end of file