card_component

package-lock.json

@@ -11,14 +11,17 @@
         "@testing-library/jest-dom": "^5.16.1",
         "@testing-library/react": "^12.1.2",
         "@testing-library/user-event": "^13.5.0",
-        "bootstrap": "^5.1.3",
+        "bootstrap": "^4.6.0",
         "classnames": "^2.3.1",
-        "fontawesome": "^5.6.3",
+        "jquery": "^3.6.0",
         "node-sass": "^7.0.1",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
+        "react-icons": "^4.3.1",
         "react-router-dom": "^6.2.1",
         "react-scripts": "5.0.0",
+        "react-social-login-buttons": "^3.6.0",
+        "sass": "^1.46.0",
         "web-vitals": "^2.1.2"
       }
     },
@@ -4875,15 +4878,26 @@
       "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24="
     },
     "node_modules/bootstrap": {
+<<<<<<< HEAD
       "version": "5.1.3",
       "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.1.3.tgz",
       "integrity": "sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q==",
+=======
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.6.0.tgz",
+      "integrity": "sha512-Io55IuQY3kydzHtbGvQya3H+KorS/M9rSNyfCGCg9WZ4pyT/lCxIlpJgG1GXW/PswzC84Tr2fBYi+7+jFVQQBw==",
+>>>>>>> 2f455e2e85735cf34ce583caeb459b39f4dc295f
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/bootstrap"
       },
       "peerDependencies": {
+<<<<<<< HEAD
         "@popperjs/core": "^2.10.2"
+=======
+        "jquery": "1.9.1 - 3",
+        "popper.js": "^1.16.1"
+>>>>>>> 2f455e2e85735cf34ce583caeb459b39f4dc295f
       }
     },
     "node_modules/brace-expansion": {
@@ -8633,6 +8647,11 @@
         "url": "https://opencollective.com/immer"
       }
     },
+    "node_modules/immutable": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.0.0.tgz",
+      "integrity": "sha512-zIE9hX70qew5qTUjSS7wi1iwj/l7+m54KWU247nhM3v806UdGj1yDndXj+IOYxxtW9zyLI+xqFNZjTuDaLUqFw=="
+    },
     "node_modules/import-fresh": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -10888,6 +10907,11 @@
         "url": "https://github.com/chalk/supports-color?sponsor=1"
       }
     },
+    "node_modules/jquery": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.0.tgz",
+      "integrity": "sha512-JVzAR/AjBvVt2BmYhxRCSYysDsPcssdmTFnzyLEts9qNwmjmu4JTAMYubEfwVOSwpQ1I1sKKFcxhZCI2buerfw=="
+    },
     "node_modules/js-base64": {
       "version": "2.6.4",
       "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.6.4.tgz",
@@ -12521,6 +12545,17 @@
         "node": ">=4"
       }
     },
+    "node_modules/popper.js": {
+      "version": "1.16.1",
+      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
+      "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==",
+      "deprecated": "You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1",
+      "peer": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/portfinder": {
       "version": "1.0.28",
       "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz",
@@ -13978,6 +14013,14 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.10.tgz",
       "integrity": "sha512-mKR90fX7Pm5seCOfz8q9F+66VCc1PGsWSBxKbITjfKVQHMNF2zudxHnMdJiB1fRCb+XsbQV9sO9DCkgsMQgBIA=="
     },
+    "node_modules/react-icons": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.3.1.tgz",
+      "integrity": "sha512-cB10MXLTs3gVuXimblAdI71jrJx8njrJZmNMEMC+sQu5B/BIOmlsAjskdqpn81y8UBVEGuHODd7/ci5DvoSzTQ==",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -14087,6 +14130,14 @@
         }
       }
     },
+    "node_modules/react-social-login-buttons": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/react-social-login-buttons/-/react-social-login-buttons-3.6.0.tgz",
+      "integrity": "sha512-m5E72jHWgC4VBxRziZYQC5kQIzooGRF+dDE97K5JgSlcDPXkNxCjCzP+Qp9fNhNujG7APvPx2Qhzi1BO2xi17Q==",
+      "peerDependencies": {
+        "react": "^15.0.0 || ^16.0.0 || ^17.x"
+      }
+    },
     "node_modules/read-pkg": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz",
@@ -14701,6 +14752,22 @@
       "resolved": "https://registry.npmjs.org/sanitize.css/-/sanitize.css-13.0.0.tgz",
       "integrity": "sha512-ZRwKbh/eQ6w9vmTjkuG0Ioi3HBwPFce0O+v//ve+aOq1oeCy7jMV2qzzAlpsNuqpqCBjjriM1lbtZbF/Q8jVyA=="
     },
+    "node_modules/sass": {
+      "version": "1.46.0",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.46.0.tgz",
+      "integrity": "sha512-Z4BYTgioAOlMmo4LU3Ky2txR8KR0GRPLXxO38kklaYxgo7qMTgy+mpNN4eKsrXDTFlwS5vdruvazG4cihxHRVQ==",
+      "dependencies": {
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      },
+      "bin": {
+        "sass": "sass.js"
+      },
+      "engines": {
+        "node": ">=8.9.0"
+      }
+    },
     "node_modules/sass-graph": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/sass-graph/-/sass-graph-4.0.0.tgz",
@@ -20838,9 +20905,15 @@
       "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24="
     },
     "bootstrap": {
+<<<<<<< HEAD
       "version": "5.1.3",
       "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.1.3.tgz",
       "integrity": "sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q==",
+=======
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.6.0.tgz",
+      "integrity": "sha512-Io55IuQY3kydzHtbGvQya3H+KorS/M9rSNyfCGCg9WZ4pyT/lCxIlpJgG1GXW/PswzC84Tr2fBYi+7+jFVQQBw==",
+>>>>>>> 2f455e2e85735cf34ce583caeb459b39f4dc295f
       "requires": {}
     },
     "brace-expansion": {
@@ -23598,6 +23671,11 @@
       "resolved": "https://registry.npmjs.org/immer/-/immer-9.0.7.tgz",
       "integrity": "sha512-KGllzpbamZDvOIxnmJ0jI840g7Oikx58lBPWV0hUh7dtAyZpFqqrBZdKka5GlTwMTZ1Tjc/bKKW4VSFAt6BqMA=="
     },
+    "immutable": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.0.0.tgz",
+      "integrity": "sha512-zIE9hX70qew5qTUjSS7wi1iwj/l7+m54KWU247nhM3v806UdGj1yDndXj+IOYxxtW9zyLI+xqFNZjTuDaLUqFw=="
+    },
     "import-fresh": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -25210,6 +25288,11 @@
         }
       }
     },
+    "jquery": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.0.tgz",
+      "integrity": "sha512-JVzAR/AjBvVt2BmYhxRCSYysDsPcssdmTFnzyLEts9qNwmjmu4JTAMYubEfwVOSwpQ1I1sKKFcxhZCI2buerfw=="
+    },
     "js-base64": {
       "version": "2.6.4",
       "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.6.4.tgz",
@@ -26411,6 +26494,12 @@
         }
       }
     },
+    "popper.js": {
+      "version": "1.16.1",
+      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
+      "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==",
+      "peer": true
+    },
     "portfinder": {
       "version": "1.0.28",
       "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz",
@@ -27363,6 +27452,12 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.10.tgz",
       "integrity": "sha512-mKR90fX7Pm5seCOfz8q9F+66VCc1PGsWSBxKbITjfKVQHMNF2zudxHnMdJiB1fRCb+XsbQV9sO9DCkgsMQgBIA=="
     },
+    "react-icons": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.3.1.tgz",
+      "integrity": "sha512-cB10MXLTs3gVuXimblAdI71jrJx8njrJZmNMEMC+sQu5B/BIOmlsAjskdqpn81y8UBVEGuHODd7/ci5DvoSzTQ==",
+      "requires": {}
+    },
     "react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -27445,6 +27540,12 @@
         "workbox-webpack-plugin": "^6.4.1"
       }
     },
+    "react-social-login-buttons": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/react-social-login-buttons/-/react-social-login-buttons-3.6.0.tgz",
+      "integrity": "sha512-m5E72jHWgC4VBxRziZYQC5kQIzooGRF+dDE97K5JgSlcDPXkNxCjCzP+Qp9fNhNujG7APvPx2Qhzi1BO2xi17Q==",
+      "requires": {}
+    },
     "read-pkg": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz",
@@ -27891,6 +27992,16 @@
       "resolved": "https://registry.npmjs.org/sanitize.css/-/sanitize.css-13.0.0.tgz",
       "integrity": "sha512-ZRwKbh/eQ6w9vmTjkuG0Ioi3HBwPFce0O+v//ve+aOq1oeCy7jMV2qzzAlpsNuqpqCBjjriM1lbtZbF/Q8jVyA=="
     },
+    "sass": {
+      "version": "1.46.0",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.46.0.tgz",
+      "integrity": "sha512-Z4BYTgioAOlMmo4LU3Ky2txR8KR0GRPLXxO38kklaYxgo7qMTgy+mpNN4eKsrXDTFlwS5vdruvazG4cihxHRVQ==",
+      "requires": {
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      }
+    },
     "sass-graph": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/sass-graph/-/sass-graph-4.0.0.tgz",

package.json

@@ -6,14 +6,17 @@
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^13.5.0",
-    "bootstrap": "^5.1.3",
+    "bootstrap": "^4.6.0",
     "classnames": "^2.3.1",
-    "fontawesome": "^5.6.3",
+    "jquery": "^3.6.0",
     "node-sass": "^7.0.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-icons": "^4.3.1",
     "react-router-dom": "^6.2.1",
     "react-scripts": "5.0.0",
+    "react-social-login-buttons": "^3.6.0",
+    "sass": "^1.46.0",
     "web-vitals": "^2.1.2"
   },
   "scripts": {

public/index.html

@@ -27,6 +27,7 @@
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
     
+
     <title>React App</title>
   </head>
   <body>

src/App.js

 import React, { lazy, Suspense } from "react";
 import { BrowserRouter, Route, Routes } from "react-router-dom";
+
 const Login = lazy(() => import("./containers/Login"));
 
 function App() {
   return (
     <div className="App">
-      <BrowserRouter>
+      
+        { <BrowserRouter>
         <Suspense fallback={<div> loading</div>}>
           <Routes>
             <Route exact path="/login" element={<Login />} />
@@ -13,8 +15,17 @@ function App() {
           </Routes>
         </Suspense>
       </BrowserRouter>  
+      }
+       
+
+      
+      
+      
     </div>
   );
 }
 
+
 export default App;
+
+

src/components/Button/Button.module.scss

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

src/components/Button/index.jsx

@@ -4,9 +4,9 @@ import cs from "classnames";
 import styles from "./Button.module.scss";
 
 function Button(props) {
-  return <div className={cs(styles.customButton)}>here</div>;
+  return <div onClick={props.handleClick} className={`btn btn-${props.color} btn-${props.size}`}> {props.buttonName}</div>
+ // "btn btn-primary btn-lg"
 }
 
 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/Menu/MenuItem.js

+import React from 'react'
+import './MenuItem.scss'
+
+export default function MenuItem(props) {
+    return (
+        <div className='menuBox'>
+            <i className={props.icon} style={props.style} aria-hidden="true"></i>
+            <a href=''>{props.title}</a>
+        </div>
+    )
+}

src/components/Menu/MenuItem.scss

+a{
+    text-decoration: none;
+    color: gray;
+    padding: 20px;
+}
+a:hover{
+    text-decoration: none;
+    color: black;
+}
+.menuBox{
+    padding: 20px;
+}
\ No newline at end of file

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

+
+$primary-color: #fff;
+.inputBox{
+    display: flex;
+    width: 250px;
+    border-radius: 50px;
+    overflow: hidden;
+    background-color: $primary-color;
+    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: $primary-color;
+    background-color: $primary-color;
+    background-clip: padding-box;
+    border: 0px solid $primary-color !important;
+   
+    border-radius: 50px;
+}
+.icon{
+    margin:10px;
+    font-size: 15px;
+   cursor: pointer;
+  color: gray;
+}
\ No newline at end of file

src/components/Social_buttons/Index.jsx

+import React from "react";
+import "./Social_buttons.scss";
+function Social_button(props){
+    return (
+    <button onClick={props.handleClick} className="social_buttons">
+        <div>
+            <img src={props.img} className="icon"></img>
+                {props.buttonName}
+        </div>
+    </button>
+    
+    );
+}
+export default Social_button;
\ No newline at end of file

src/components/Social_buttons/Social_buttons.scss

+.icon{
+    height: 20px;
+    width: 20px;
+    margin-right: 8px;
+    
+  }
+  .social_buttons{
+    border: 0px;
+    background-color: white;
+    font-size: 19px;
+    box-shadow:  2px 2px 1px #aaaa;
+  border-radius: 5px ;
+transition: all 200ms ease-in;
+padding-left: 20px;
+padding-right: 20px;
+
+  }
+  .social_buttons:hover{
+    color: cadetblue;
+    -webkit-transform:scale(1.1);
+    
+  }
+  
\ No newline at end of file

src/components/index.js

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

src/containers/Login/index.jsx

@@ -3,13 +3,10 @@ import PropTypes from "prop-types";
 import Cards from "components/Cards/Cards";
 
 function Login(props) {
-  return (
-  <div>
+   return <div>login</div>;
   
-    </div>
-  );
-}
 
-Login.propTypes = {};
 
+Login.propTypes = {};
+}
 export default Login;

src/index.js

@@ -3,6 +3,9 @@ import ReactDOM from "react-dom";
 import App from "./App";
 import reportWebVitals from "./reportWebVitals";
 import "./assets/scss/argon.scss";
+import "jquery/dist/jquery.slim.min";
+import "bootstrap/dist/js/bootstrap.bundle.min";
+import "bootstrap/dist/css/bootstrap.min.css";
 
 ReactDOM.render(
   <React.StrictMode>