finished working on the user interface

components/SideBar.js

@@ -1,23 +1,80 @@
-import React from 'react'
+import React, {useState} from 'react'
 import RoundBtn from './RoundBtn'
-import { AiOutlineClose } from "react-icons/ai"
+import { AiOutlineClose, AiOutlineSearch, AiOutlineRight } from "react-icons/ai"
 import { useDispatch, useSelector } from 'react-redux'
 import { TOGGLE_SEARCH } from "../redux/actions/types"
+import PrimaryBtn from './PrimaryBtn'
 
 const SideBar = () => {
 
     const dispatch = useDispatch()
+    const [showIcon, setShowIcon] = useState({
+        first:false,
+        second:false,
+        third:false,
+    })
 
     return (
         <div className="slide-in-left fixed top-0 left-0 z-40 bg-bggray pt-6 pb-8 px-6 h-screen 
         w-screen md:w-72 lg:w-80 text-maytext">
-            <div className="flex justify-end">
+            <div className="flex justify-end mb-5">
                 <RoundBtn
                     btnText={<AiOutlineClose className="h-5 w-5 text-maytext" />}
                     addStyle="h-10 w-10 bg-bggray "
-                    clicked={() => {dispatch({type:TOGGLE_SEARCH})}}
+                    clicked={() => { dispatch({ type: TOGGLE_SEARCH }) }}
                 />
             </div>
+
+            <div className="grid grid-cols-6 gap-2 mb-10">
+                <div className="relative col-span-4">
+                    <input
+                        type="text"
+                        placeholder="search location"
+                        className="w-full pl-8 py-2 pr-2 bg-transparent text-inputtext placeholder-inputtext border border-gray-500 focus:outline-none text-sm"
+                    />
+                    <AiOutlineSearch className="text-inputtext h-5 w-5 absolute searchbtn" />
+                </div>
+
+                <div className="col-span-2">
+                    <PrimaryBtn
+                        btnText="Search"
+                        addStyle="w-full bg-btnblue text-white border border-btnblue hover:border-blue-800 hover:bg-blue-800"
+                        clicked={() => {  }}
+                    />
+                </div>
+            </div>
+
+            <div>
+                <button onMouseOver={() =>{setShowIcon({ ...showIcon, first:!showIcon.first })}} 
+                onMouseOut={() =>{setShowIcon({ ...showIcon, first:!showIcon.first })}}
+                className="focus:outline-none text-sm bg-transparent p-3 flex mb-4
+                 items-center justify-between w-full text-maytext border border-transparent
+                  hover:border-gray-500">
+                    <p>London</p>
+                    { showIcon.first && <AiOutlineRight className="h-4 w-4" />}
+                </button>
+
+                <button onMouseOver={() =>{setShowIcon({ ...showIcon, second:!showIcon.second })}} 
+                onMouseOut={() =>{setShowIcon({ ...showIcon, second:!showIcon.second })}}
+                className="focus:outline-none text-sm bg-transparent p-3 flex mb-4
+                 items-center justify-between w-full text-maytext border border-transparent
+                  hover:border-gray-500">
+                    <p>Barcelona</p>
+                    { showIcon.second && <AiOutlineRight className="h-4 w-4" />}
+                </button>
+
+                <button onMouseOver={() =>{setShowIcon({ ...showIcon, third:!showIcon.third })}} 
+                onMouseOut={() =>{setShowIcon({ ...showIcon, third:!showIcon.third })}}
+                className="focus:outline-none text-sm bg-transparent p-3 flex mb-4
+                 items-center justify-between w-full text-maytext border border-transparent
+                  hover:border-gray-500">
+                    <p>Long Beach</p>
+                    { showIcon.third && <AiOutlineRight className="h-4 w-4" />}
+                </button>
+
+
+            </div>
+
         </div>
     )
 }

pages/index.js

@@ -1,14 +1,22 @@
+import React , {useEffect} from "react"
 import Head from 'next/head'
 import Image from 'next/image'
 import LeftView from '../components/LeftView'
 import RightView from '../components/RightView'
 import SideBar from '../components/SideBar'
 import { useDispatch, useSelector } from 'react-redux'
+import { SET_SEARCH } from '../redux/actions/types'
 
 
 export default function Home() {
 
   const { showSearch } = useSelector(state => state.search)
+  const dispatch = useDispatch()
+  console.log(showSearch);
+
+  useEffect(() => {
+    dispatch({ type: SET_SEARCH })
+  }, [])
 
   return (
     <div >

redux/actions/types.js

@@ -1,2 +1,3 @@
 // testing
-export const TOGGLE_SEARCH = "TOGGLE_SEARCH"
+export const TOGGLE_SEARCH = "TOGGLE_SEARCH"
+export const SET_SEARCH = "SET_SEARCH"

redux/reducers/search.js

@@ -1,4 +1,4 @@
-import { TOGGLE_SEARCH } from "../actions/types"
+import { TOGGLE_SEARCH, SET_SEARCH } from "../actions/types"
 
 const initState = {
     showSearch: false
@@ -12,6 +12,12 @@ export const searchReducer = (state=initState,action) => {
                 showSearch: !state.showSearch
             }
 
+        case SET_SEARCH:
+            return {
+                ...state,
+                showSearch: false
+            }
+
         default:
             return state
     }

styles/globals.scss

@@ -45,8 +45,8 @@ body {
 
   // styles for animation of SideBar
   .slide-in-left {
-    -webkit-animation: slide-in-left 0.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s both;
-	  animation: slide-in-left 0.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s both;
+    -webkit-animation: slide-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.2s both;
+	  animation: slide-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.2s both;
   }
 
   @-webkit-keyframes slide-in-left {
@@ -73,6 +73,12 @@ body {
       opacity: 1;
     }
   }
+
+  // styles for search icon in search field
+  .searchbtn{
+    top:25%;
+    left:3%;
+  }
 
 
 @media screen and (max-width: 767px){

tailwind.config.js

@@ -15,8 +15,8 @@ module.exports = {
         maytext:"#E7E7EB",
         textleft:"#88869D",
         mayyellow:"#FFEC65",
-
-
+        inputtext:"#616475",
+        btnblue:"#3C47E9",
       }
     },