From bb96b8ed33172a9d2654e0819b1f5d91434a75bf Mon Sep 17 00:00:00 2001
From: "chinmayanand.pattar" <chinmayanand.pattar@niveussolutions.com>
Date: Fri, 7 Jan 2022 15:28:49 +0530
Subject: [PATCH] SearchBar
---
src/components/SearchBar/SearchBar.jsx | 11 ++++++++---
src/components/SearchBar/SearchBar.scss | 15 ++++++++-------
src/components/index.js | 1 +
src/containers/Login/index.jsx | 4 +++-
4 files changed, 20 insertions(+), 11 deletions(-)
diff --git a/src/components/SearchBar/SearchBar.jsx b/src/components/SearchBar/SearchBar.jsx
index ca131cc..f9e83db 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 540b812..ff3f686 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 1fdf438..dfd77b0 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 9c29213..8f682e2 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>
</>
--
GitLab