diff --git a/src/components/SearchBar/SearchBar.jsx b/src/components/SearchBar/SearchBar.jsx index ca131ccb9705f00e74ffca341b8600f66ec4359c..f9e83dbaa25472ea332044930a9ced5a8a38f8e9 100644 --- a/src/components/SearchBar/SearchBar.jsx +++ b/src/components/SearchBar/SearchBar.jsx @@ -1,12 +1,17 @@ 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> ) } diff --git a/src/components/SearchBar/SearchBar.scss b/src/components/SearchBar/SearchBar.scss index 540b812a4c39de561bacf22e9355c9a5422867a1..ff3f686d555b5ade8392350e0ae1d3f3e1f5a205 100644 --- a/src/components/SearchBar/SearchBar.scss +++ b/src/components/SearchBar/SearchBar.scss @@ -1,17 +1,16 @@ .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 diff --git a/src/components/index.js b/src/components/index.js index 1fdf4382e5bd73f112a978acdddd4aa444265db1..dfd77b0712e18d7f6fdbac546e6ac39418f35bc2 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -1 +1,2 @@ export { default as Button } from "./Button"; +export{default as SearchBar} from './SearchBar' diff --git a/src/containers/Login/index.jsx b/src/containers/Login/index.jsx index 9c29213612ed3de5543876fec507bed56619bf31..8f682e2abff5daff6dadcde3c884414e47b60f06 100644 --- a/src/containers/Login/index.jsx +++ b/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> </>