Features/ashok/cards

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>
     )
 }