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

Intial

parent 06543f40
No related branches found
No related tags found
2 merge requests!7Revert "Merge branch 'features/Adam/image' into 'development'",!5Features/ashok/cards
...@@ -10,6 +10,7 @@ ...@@ -10,6 +10,7 @@
content="Web site created using create-react-app" content="Web site created using create-react-app"
/> />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- <!--
manifest.json provides metadata used when your web app is installed on a manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/ user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
......
import React, { useState } from 'react'
import './SearchBar.scss'
export default function SearchBar() {
const [isFocus, setIsFocus] = useState(false);
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)} />
</div>
)
}
.inputBox{
display: flex;
width: 250px;
border-radius: 50px;
overflow: hidden;
background-color: #fff;
padding: 5px;
}
.focused{
width: 380px!important;
}
.search-control {
display: block;
width: 100%;
height: calc(1.5em + 0.75rem + 2px);
padding: 2px;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
outline: #fff;
background-color: #fff;
background-clip: padding-box;
border: 0px solid #fff !important;
border-color: #fff !important;
border-radius: 50px;
transition: width 10s ease-in-out;
}
import React from "react"; import React from "react";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import Button from "components/Button"; import SearchBar from "components/SearchBar/SearchBar";
function Login(props) { function Login(props) {
// return <div>login</div>; return (
return <> <>
<Button buttonName="pwe"/> <div style={{backgroundColor:'blue',padding:'50px'}}> login
{/* <Button type="password" name="password" /> */} <SearchBar/>
</div>
</> </>
)
} }
Login.propTypes = {}; Login.propTypes = {};
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment