Button component added

package-lock.json

@@ -11,7 +11,9 @@
         "@testing-library/jest-dom": "^5.16.1",
         "@testing-library/react": "^12.1.2",
         "@testing-library/user-event": "^13.5.0",
+        "bootstrap": "^4.6.0",
         "classnames": "^2.3.1",
+        "jquery": "^3.6.0",
         "node-sass": "^7.0.1",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
@@ -4862,6 +4864,19 @@
       "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
       "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24="
     },
+    "node_modules/bootstrap": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.6.0.tgz",
+      "integrity": "sha512-Io55IuQY3kydzHtbGvQya3H+KorS/M9rSNyfCGCg9WZ4pyT/lCxIlpJgG1GXW/PswzC84Tr2fBYi+7+jFVQQBw==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/bootstrap"
+      },
+      "peerDependencies": {
+        "jquery": "1.9.1 - 3",
+        "popper.js": "^1.16.1"
+      }
+    },
     "node_modules/brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -10859,6 +10874,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",
@@ -12492,6 +12512,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",
@@ -20802,6 +20833,12 @@
       "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
       "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24="
     },
+    "bootstrap": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.6.0.tgz",
+      "integrity": "sha512-Io55IuQY3kydzHtbGvQya3H+KorS/M9rSNyfCGCg9WZ4pyT/lCxIlpJgG1GXW/PswzC84Tr2fBYi+7+jFVQQBw==",
+      "requires": {}
+    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -25164,6 +25201,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",
@@ -26365,6 +26407,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",

package.json

@@ -6,7 +6,9 @@
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^13.5.0",
+    "bootstrap": "^4.6.0",
     "classnames": "^2.3.1",
+    "jquery": "^3.6.0",
     "node-sass": "^7.0.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",

src/components/Button/Button.module.scss

 .customButton {
-  background-color: red;
+  /* background-color: red; */
+  background-color: blue;
+  color: brown;
 }
+
+/* // .btn{
+//   .btn-abc{
+//     background-color: aqua;
+//   }
+// } */

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>;
-}
+return (
+  <div className="btn btn-primary">
+   
+    {props.buttonName}
 
-Button.propTypes = {};
+  </div>
+)
+}
 
 export default Button;

src/containers/Login/index.jsx

 import React from "react";
 import PropTypes from "prop-types";
+import Button from "components/Button";
 
 function Login(props) {
-  return <div>login</div>;
+  // return <div>login</div>;
+  return <>
+  <Button buttonName="pwe"/>
+  {/* <Button type="password" name="password" /> */}
+  </>
 }
 
 Login.propTypes = {};

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>