add result component, env var and fetch functions

kitabcitab/pages/search.js

@@ -1,9 +1,23 @@
-import React from 'react'
+import React, { useState } from 'react'
 import Results from '../components/Results'
-import { AiOutlineClose } from 'react-icons/ai'
+import { AiOutlineClose, AiOutlineSearch } from 'react-icons/ai'
 import Link from 'next/link'
+import { useRef } from 'react'
+import { useRouter } from 'next/router'
+import { ENV_VAR } from '../envconfig'
 
-const SearchPage = () => {
+
+const SearchPage = ({data}) => {
+  const router = useRouter()
+  const [searchInput, setSearchInput] = useState(router.query.term)
+
+  const search = () => {
+    const term = searchInput
+    if(!term) return
+    router.push(`/search?term=${term}`)
+  }
+
+  console.log(data)
 
   return (
     <div className='flex flex-col justify-center'>
@@ -14,7 +28,7 @@ const SearchPage = () => {
             <div className="group
                 my-3
                 mx-auto
-                py-5 
+                py-5
                 h-[4vh]
                 min-w-[90vw]
                 bg-[#303134]
@@ -30,13 +44,23 @@ const SearchPage = () => {
                 laptop:justify-between
                 "
             >
-                <input className="bg-[#303134] ml-5 w-[80vw] active:border-none text-white outline-none text-lg "/>
-                <i className='rounded-3xl text-[#9aa0a6] px-3 py-auto' onClick={() => console.log("Remove text from input")}><AiOutlineClose size={25} /></i>
+                <i className='rounded-3xl hover:border-black text-[#9aa0a6] px-3' onClick={() => search()}><AiOutlineSearch size={25}/></i>
+                <input value={searchInput} onChange={(e) => setSearchInput(e.target.value)} className="bg-[#303134] ml-5 w-[70%] active:border-none text-white outline-none text-lg "/>
+                <i className='rounded-3xl text-[#9aa0a6] px-3' onClick={() => setSearchInput("")}><AiOutlineClose size={25} /></i>
             </div>
         </div>
-        <Results  />
+        <Results  data={data.hits.hits}/>
     </div>
   )
 }
 
+export async function getServerSideProps(context) {
+    // Fetch data from external API
+    const res = await fetch(`${ENV_VAR}_search?q=${context.query.term}`)
+    const data = await res.json()
+  
+    // Pass data to the page via props
+    return { props: { data } }
+  }
+
 export default SearchPage