Skip to content
Snippets Groups Projects
Commit bb96b8ed authored by chinmayanand.pattar's avatar chinmayanand.pattar
Browse files

SearchBar

parent 0fcafdf8
No related branches found
No related tags found
2 merge requests!7Revert "Merge branch 'features/Adam/image' into 'development'",!5Features/ashok/cards
import React, { useState } from 'react' import React, { useState } from 'react'
import './SearchBar.scss' import './SearchBar.scss'
export default function SearchBar() { export default function SearchBar(props) {
const [isFocus, setIsFocus] = useState(false); const [isFocus, setIsFocus] = useState(false);
const handleChange =(value)=>{
props.onSearch(value)
}
return ( return (
<div className={isFocus ?'inputBox focused' :'inputBox'}> <div className={isFocus ?'inputBox focused' :'inputBox'}>
<i style={{margin:'10px',fontSize:'15px',cursor:'pointer',color:'gray'}} class="fa fa-search" aria-hidden="true"></i> <i className="fa fa-search icon" aria-hidden="true"></i>
<input placeholder='Search' className='search-control' onBlur={()=>setIsFocus(false)} onFocus={()=>setIsFocus(true)} /> <input placeholder='Search' className='search-control' onBlur={()=>setIsFocus(false)} onFocus={()=>setIsFocus(true)} onChange={(e)=>handleChange(e.target.value)} />
</div> </div>
) )
} }
.inputBox{ .inputBox{
display: flex; display: flex;
width: 250px; width: 250px;
border-radius: 50px; border-radius: 50px;
overflow: hidden; overflow: hidden;
background-color: #fff; background-color: #fff;
padding: 5px; padding: 5px;
transition: width .15s cubic-bezier(0.68, -0.55, 0.27, 1.55)
} }
.focused{ .focused{
width: 380px!important; width: 380px!important;
transition: width .15s cubic-bezier(0.68, -0.55, 0.27, 1.55)
} }
.search-control { .search-control {
display: block; display: block;
...@@ -27,8 +26,10 @@ ...@@ -27,8 +26,10 @@
border: 0px solid #fff !important; border: 0px solid #fff !important;
border-color: #fff !important; border-color: #fff !important;
border-radius: 50px; 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
export { default as Button } from "./Button"; export { default as Button } from "./Button";
export{default as SearchBar} from './SearchBar'
...@@ -3,10 +3,12 @@ import PropTypes from "prop-types"; ...@@ -3,10 +3,12 @@ import PropTypes from "prop-types";
import SearchBar from "components/SearchBar/SearchBar"; import SearchBar from "components/SearchBar/SearchBar";
function Login(props) { function Login(props) {
const onSearch =(value)=>{
}
return ( return (
<> <>
<div style={{backgroundColor:'blue',padding:'50px'}}> login <div style={{backgroundColor:'blue',padding:'50px'}}> login
<SearchBar/> <SearchBar onSearch={onSearch}/>
</div> </div>
</> </>
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment