Card Component

package-lock.json

@@ -15,6 +15,7 @@
         "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"
@@ -13949,6 +13950,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",
@@ -27317,6 +27326,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",

package.json

@@ -10,6 +10,7 @@
     "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"

src/components/Card/Card.module.scss

+.card {
+  display: flex;
+  background-color: #f8f9fa;
+  flex-direction: row;
+  justify-content: center;
+  width: 200px;
+  position: relative;
+  height: 8vh;
+  border: none;
+  padding: 10px 10px;
+  margin: 20px;
+}
+
+.card:hover {
+  border: 1px solid grey;
+  box-shadow: 1px 1px 6px -3px grey;
+  cursor: pointer;
+}

src/components/Card/index.jsx

+import PropTypes from "prop-types";
+import cs from "classnames";
+import styles from "./Card.module.scss";
+
+function Card(props) {
+  const {customClass, children } = props;
+  return (
+    <div className={cs(customClass, styles.card)} title="Copy to clipboard">
+      {children}
+    </div>
+  );
+}
+
+Card.propTypes = {
+  children: PropTypes.element,
+  customClass: PropTypes.string,
+};
+
+export default Card;

src/containers/Login/index.jsx

 import React from "react";
 import PropTypes from "prop-types";
+import Card from "components/Card";
+import { FaDiscord } from "react-icons/fa";
 
-function Login(props) {
-  return <div>login</div>;
+function Login() {
+  return (
+    <div style={{ display: "flex", flexDirection: "row" }}>
+      login
+      <Card customClass="card">
+        <FaDiscord style={{ fontSize: "27px", paddingRight: "10px" }} />
+        <p style={{fontSize: '16px'}}>Text 3</p>
+      </Card>
+    </div>
+  );
 }
 
 Login.propTypes = {};