Skip to content
Snippets Groups Projects
Commit 5ec57319 authored by Pavan Kamath's avatar Pavan Kamath
Browse files

Card Component

parent ee5d99b6
No related branches found
No related tags found
No related merge requests found
......@@ -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",
......@@ -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"
......
.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;
}
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;
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 = {};
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment