Skip to content
Snippets Groups Projects
Commit 951ce556 authored by amulya's avatar amulya
Browse files

creating buttons

parents 57d85874 60469c43
No related branches found
No related tags found
2 merge requests!7Revert "Merge branch 'features/Adam/image' into 'development'",!5Features/ashok/cards
This commit is part of merge request !5. Comments created here will be created in the context of that merge request.
...@@ -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/
......
.customButton {
background-color: red;
}
import React from "react";
import PropTypes from "prop-types";
import cs from "classnames";
import styles from "./Button.module.scss";
function Button(props) {
return <div className={cs(styles.customButton)}>here</div>;
}
Button.propTypes = {};
export default Button;
.card-profile-image {
max-width: 140px;
border: 3px solid #fff;
border-radius: 0.375rem;
}
import React from "react";
import PropTypes from "prop-types";
import "./Image.scss";
// Profile Image common components
function Image({src, width}) {
return (
<>
<div className="card-profile-image">
<img src={src} width={width} className="rounded-circle card-profile-image"/>
</div>
</>
);
}
Image.propTypes = {
src: PropTypes.string,
width: PropTypes.string
};
export default Image;
import React, { useState } from 'react'
import './SearchBar.scss'
export default function SearchBar(props) {
const [isFocus, setIsFocus] = useState(false);
const handleChange =(value)=>{
props.onSearch(value)
}
return (
<div className={isFocus ?'inputBox focused' :'inputBox'}>
<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>
)
}
.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;
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;
}
.icon{
margin:10px;
font-size: 15px;
cursor: pointer;
color: gray;
}
\ No newline at end of file
export { default as Button } from "./Btn"; export { default as Button } from "./Button";
export{default as SearchBar} from './SearchBar'
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment