SearchBar

src/components/SearchBar/SearchBar.jsx

 import React, { useState } from 'react'
 import './SearchBar.scss'
 
-export default function SearchBar() {
+export default function SearchBar(props) {
     const [isFocus, setIsFocus] = useState(false);
+
+const handleChange =(value)=>{
+    props.onSearch(value)
+
+}
     return (
         <div className={isFocus ?'inputBox focused' :'inputBox'}>
-            <i style={{margin:'10px',fontSize:'15px',cursor:'pointer',color:'gray'}} class="fa fa-search" aria-hidden="true"></i>
-            <input placeholder='Search' className='search-control' onBlur={()=>setIsFocus(false)} onFocus={()=>setIsFocus(true)} />
+            <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;
@@ -27,8 +26,10 @@
     border: 0px solid #fff !important;
     border-color: #fff !important;
     border-radius: 50px;
-  
-    transition: width 10s ease-in-out;
-     
-
+}
+.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'

src/containers/Login/index.jsx

@@ -3,10 +3,12 @@ import PropTypes from "prop-types";
 import SearchBar from "components/SearchBar/SearchBar";
 
 function Login(props) {
+const onSearch =(value)=>{
+}
   return (
     <>
   <div style={{backgroundColor:'blue',padding:'50px'}}> login
-  <SearchBar/>
+  <SearchBar onSearch={onSearch}/>
   </div>
  
   </>