diff --git a/package-lock.json b/package-lock.json
index cb2cffea185eb53754d882d69a675e26fef1799b..f54d4abf111d3c27e56b82254bc0fe8d07c2aa1f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,10 +11,13 @@
"@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",
+ "react-icons": "^4.3.1",
"react-router-dom": "^6.2.1",
"react-scripts": "5.0.0",
"web-vitals": "^2.1.2"
@@ -4862,6 +4865,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 +10875,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 +12513,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",
@@ -13949,6 +13981,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",
@@ -20802,6 +20842,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 +25210,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 +26416,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",
@@ -27317,6 +27374,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",
diff --git a/package.json b/package.json
index f3b5c45f9956015e36ec55c11f3d55e9cbfc42a3..f780f8971648203642dcd48ec5c94235b7066438 100644
--- a/package.json
+++ b/package.json
@@ -6,10 +6,13 @@
"@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",
+ "react-icons": "^4.3.1",
"react-router-dom": "^6.2.1",
"react-scripts": "5.0.0",
"web-vitals": "^2.1.2"
diff --git a/src/App.js b/src/App.js
index fe8d2fb63d05355088f95d70fe3d04890e2f7f39..8e79aaf10be7f7bf9ac0a71c19c1b95837cafa9b 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,20 +1,33 @@
+
+import Button from './components/Button/index'
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 />} />
<Route path="/" element={<Login />} />
</Routes>
</Suspense>
- </BrowserRouter>
+ </BrowserRouter>
+ }
+
+
+
+
+
</div>
);
}
+
export default App;
+
+
diff --git a/src/components/Button/Button.module.scss b/src/components/Button/Button.module.scss
index 01690d459a8020f8cd7c2dfff08fe8efc453ce0d..f9ea37546ff6fcd7fe8bb3f8df7a8c4573356811 100644
--- a/src/components/Button/Button.module.scss
+++ b/src/components/Button/Button.module.scss
@@ -1,5 +1,5 @@
.customButton {
background-color: red;
-}
+}
diff --git a/src/components/Button/index.jsx b/src/components/Button/index.jsx
index afee0bad4344e3887667f851a4fe01395f84d8c0..0975c524369040eaca5afa1c1c71cc125ad560af 100644
--- a/src/components/Button/index.jsx
+++ b/src/components/Button/index.jsx
@@ -4,7 +4,8 @@ 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 = {};
diff --git a/src/containers/Login/index.jsx b/src/containers/Login/index.jsx
index 2f53370911e3e79719d28ed0e9c12a0d0fb83cb2..c9f3883716a2818f4fc0743610a1f4e8c3b91deb 100644
--- a/src/containers/Login/index.jsx
+++ b/src/containers/Login/index.jsx
@@ -1,10 +1,17 @@
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>;
+
+
-Login.propTypes = {};
+
+
+Login.propTypes = {};
+}
export default Login;
diff --git a/src/index.js b/src/index.js
index 3b0bb3361e032a28facd5fb46dc83cc746bc4111..532e1b57444ef19873800abb716ccb959e65e2ee 100644
--- a/src/index.js
+++ b/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>