creating buttons

public/index.html

@@ -10,6 +10,7 @@
       content="Web site created using create-react-app"
     />
     <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
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/

src/components/Button/Button.module.scss

+.customButton {
+   background-color: red; 
+}
+
+

src/components/Button/index.jsx

+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;

src/components/Image/Image.scss

+
+.card-profile-image  {
+  max-width: 140px;
+  border: 3px solid #fff;
+  border-radius: 0.375rem;
+}

src/components/Image/index.jsx

+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;

src/components/SearchBar/SearchBar.jsx

+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>
+    )
+}

src/components/SearchBar/SearchBar.scss

+
+.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

src/components/index.js

-export { default as Button } from "./Btn";
+export { default as Button } from "./Button";
+export{default as SearchBar} from './SearchBar'