Merge branch 'feature/chinmayanand/SearchBar' into 'development'

Feature/chinmayanand/search bar

See merge request nipa.das/sample_argon!3

public/index.html

@@ -10,6 +10,7 @@
       content="Web site created using create-react-app"
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/

src/components/SearchBar/SearchBar.jsx

+import React, { useState } from 'react'
+import './SearchBar.scss'
+
+export default function SearchBar(props) {
+    const [isFocus, setIsFocus] = useState(false);
+
+const handleChange =(value)=>{
+    props.onSearch(value)
+
+}
+    return (
+        <div className={isFocus ?'inputBox focused' :'inputBox'}>
+            <i className="fa fa-search icon" aria-hidden="true"></i>
+            <input placeholder='Search' className='search-control' onBlur={()=>setIsFocus(false)} onFocus={()=>setIsFocus(true)} onChange={(e)=>handleChange(e.target.value)} />
+        </div>
+    )
+}

src/components/SearchBar/SearchBar.scss

+
+.inputBox{
+    display: flex;
+    width: 250px;
+    border-radius: 50px;
+    overflow: hidden;
+    background-color: #fff;
+    padding: 5px;
+    transition: width .15s cubic-bezier(0.68, -0.55, 0.27, 1.55)
+}
+.focused{
+    width: 380px!important;
+    transition: width .15s cubic-bezier(0.68, -0.55, 0.27, 1.55)
+}
+.search-control {
+    display: block;
+    width: 100%;
+    height: calc(1.5em + 0.75rem + 2px);
+    padding: 2px;
+    font-size: 1rem;
+    font-weight: 400;
+    line-height: 1.5;
+    outline: #fff;
+    background-color: #fff;
+    background-clip: padding-box;
+    border: 0px solid #fff !important;
+    border-color: #fff !important;
+    border-radius: 50px;
+}
+.icon{
+    margin:10px;
+    font-size: 15px;
+   cursor: pointer;
+  color: gray;
+}
\ No newline at end of file

src/components/index.js

 export { default as Button } from "./Button";
+export{default as SearchBar} from './SearchBar'