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

title removed

parents 2b464018 bebb43f7
Branches
No related tags found
1 merge request!10Card Component
......@@ -8,10 +8,14 @@
"name": "argon",
"version": "0.1.0",
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^1.2.36",
"@fortawesome/free-solid-svg-icons": "^5.15.4",
"@fortawesome/react-fontawesome": "^0.1.16",
"@testing-library/jest-dom": "^5.16.1",
"@testing-library/react": "^12.1.2",
"@testing-library/user-event": "^13.5.0",
"classnames": "^2.3.1",
"font-awesome": "^4.7.0",
"node-sass": "^7.0.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
......@@ -1906,6 +1910,51 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/@fortawesome/fontawesome-common-types": {
"version": "0.2.36",
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.36.tgz",
"integrity": "sha512-a/7BiSgobHAgBWeN7N0w+lAhInrGxksn13uK7231n2m8EDPE3BMCl9NZLTGrj9ZXfCmC6LM0QLqXidIizVQ6yg==",
"hasInstallScript": true,
"engines": {
"node": ">=6"
}
},
"node_modules/@fortawesome/fontawesome-svg-core": {
"version": "1.2.36",
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.36.tgz",
"integrity": "sha512-YUcsLQKYb6DmaJjIHdDWpBIGCcyE/W+p/LMGvjQem55Mm2XWVAP5kWTMKWLv9lwpCVjpLxPyOMOyUocP1GxrtA==",
"hasInstallScript": true,
"dependencies": {
"@fortawesome/fontawesome-common-types": "^0.2.36"
},
"engines": {
"node": ">=6"
}
},
"node_modules/@fortawesome/free-solid-svg-icons": {
"version": "5.15.4",
"resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.4.tgz",
"integrity": "sha512-JLmQfz6tdtwxoihXLg6lT78BorrFyCf59SAwBM6qV/0zXyVeDygJVb3fk+j5Qat+Yvcxp1buLTY5iDh1ZSAQ8w==",
"hasInstallScript": true,
"dependencies": {
"@fortawesome/fontawesome-common-types": "^0.2.36"
},
"engines": {
"node": ">=6"
}
},
"node_modules/@fortawesome/react-fontawesome": {
"version": "0.1.16",
"resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.16.tgz",
"integrity": "sha512-aLmzDwC9rEOAJv2UJdMns89VZR5Ry4IHu5dQQh24Z/lWKEm44lfQr1UNalZlkUaQN8d155tNh+CS7ntntj1VMA==",
"dependencies": {
"prop-types": "^15.7.2"
},
"peerDependencies": {
"@fortawesome/fontawesome-svg-core": "~1 || >=1.3.0-beta1",
"react": ">=16.x"
}
},
"node_modules/@gar/promisify": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/@gar/promisify/-/promisify-1.1.2.tgz",
......@@ -7660,6 +7709,14 @@
}
}
},
"node_modules/font-awesome": {
"version": "4.7.0",
"resolved": "https://registry.npmjs.org/font-awesome/-/font-awesome-4.7.0.tgz",
"integrity": "sha1-j6jPBBGhoxr9B7BtKQK7n8gVoTM=",
"engines": {
"node": ">=0.10.3"
}
},
"node_modules/forever-agent": {
"version": "0.6.1",
"resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz",
......@@ -18609,6 +18666,35 @@
}
}
},
"@fortawesome/fontawesome-common-types": {
"version": "0.2.36",
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.36.tgz",
"integrity": "sha512-a/7BiSgobHAgBWeN7N0w+lAhInrGxksn13uK7231n2m8EDPE3BMCl9NZLTGrj9ZXfCmC6LM0QLqXidIizVQ6yg=="
},
"@fortawesome/fontawesome-svg-core": {
"version": "1.2.36",
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.36.tgz",
"integrity": "sha512-YUcsLQKYb6DmaJjIHdDWpBIGCcyE/W+p/LMGvjQem55Mm2XWVAP5kWTMKWLv9lwpCVjpLxPyOMOyUocP1GxrtA==",
"requires": {
"@fortawesome/fontawesome-common-types": "^0.2.36"
}
},
"@fortawesome/free-solid-svg-icons": {
"version": "5.15.4",
"resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.4.tgz",
"integrity": "sha512-JLmQfz6tdtwxoihXLg6lT78BorrFyCf59SAwBM6qV/0zXyVeDygJVb3fk+j5Qat+Yvcxp1buLTY5iDh1ZSAQ8w==",
"requires": {
"@fortawesome/fontawesome-common-types": "^0.2.36"
}
},
"@fortawesome/react-fontawesome": {
"version": "0.1.16",
"resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.16.tgz",
"integrity": "sha512-aLmzDwC9rEOAJv2UJdMns89VZR5Ry4IHu5dQQh24Z/lWKEm44lfQr1UNalZlkUaQN8d155tNh+CS7ntntj1VMA==",
"requires": {
"prop-types": "^15.7.2"
}
},
"@gar/promisify": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/@gar/promisify/-/promisify-1.1.2.tgz",
......@@ -22877,6 +22963,11 @@
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.6.tgz",
"integrity": "sha512-fhUl5EwSJbbl8AR+uYL2KQDxLkdSjZGR36xy46AO7cOMTrCMON6Sa28FmAnC2tRTDbd/Uuzz3aJBv7EBN7JH8A=="
},
"font-awesome": {
"version": "4.7.0",
"resolved": "https://registry.npmjs.org/font-awesome/-/font-awesome-4.7.0.tgz",
"integrity": "sha1-j6jPBBGhoxr9B7BtKQK7n8gVoTM="
},
"forever-agent": {
"version": "0.6.1",
"resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz",
.customButton {
background-color: red;
font-size: 0.75rem;
color: #5e72e4;
position: relative;
transition: all 0.15s ease !important;
letter-spacing: 0.025em;
text-transform: none;
will-change: transform;
line-height: 1.5 !important;
padding: 0.25rem 0.5rem !important;
border-radius: 0.25rem !important;
border-color: #fff;
background-color: #fff;
box-shadow: 0 4px 6px rgba(0.1, 0.1, 0.1, 0.11),
0 1px 3px rgba(0.1, 0.1, 0.1, 0.8);
font-weight: 600;
line-height: 1.5 !important;
display: inline-block;
/* padding: 0.625rem 1.25rem!important; */
cursor: pointer;
-webkit-user-select: none;
user-select: none;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
text-align: center;
vertical-align: middle;
border: 1px solid transparent;
border-radius: 0.25rem !important;
margin-right: 16px;
&:hover {
transform: translateY(-1px);
box-shadow: 0 7px 14px rgba(0.5, 0.5, 0.93, 0.1),
0 3px 6px rgba(0, 0, 0, 0.8);
color: #212529;
border-color: #fff;
background-color: #fff;
}
&.filledButton {
color: #fff;
background-color: #5e72e4;
}
}
import React from "react";
import PropTypes from "prop-types";
import cs from "classnames";
import styles from "./Button.module.scss";
import style from "./Button.module.scss";
function Button(props) {
return <div className={cs(styles.customButton)}>here</div>;
const { label, customClass, disabled, variant, handleButtonClick } = props;
return (
<button
onClick={handleButtonClick}
className={cs(style.customButton, style[variant], customClass)}
disabled={disabled}
>
{label}
</button>
);
}
Button.propTypes = {};
Button.propTypes = {
customClass: PropTypes.string,
label: PropTypes.string,
disabled: PropTypes.bool,
variant: PropTypes.oneOf(["filledButton"]),
handleButtonClick: PropTypes.func,
};
Button.defaultProps = {
label: "Button",
variant: "filledButton",
customClass: "",
};
export default Button;
......@@ -5,7 +5,7 @@ import styles from "./Card.module.scss";
function Card(props) {
const {customClass, children } = props;
return (
<div className={cs(styles.card, customClass )} title="Copy to Clipboard">
<div className={cs(styles.card, customClass )}>
{children}
</div>
);
......
import React from "react";
import { FaSearch } from "react-icons/fa";
import styles from "./SearchBar.module.scss";
function SearchBar(props) {
return (
<div className={styles.searchBar}>
<FaSearch className={styles.icon} />
<input className={styles.searchInput} placeholder={props.searchInput} type="text" />
</div>
);
}
export default SearchBar;
.searchBar {
display: flex;
width: 300px;
border-radius: 25px;
background-color: #d0d3e4;
padding: 6px;
text-align: center;
transition: width 1s;
&:hover {
width: 500px;
background-color: white;
}
.searchInput {
background-color: transparent;
border: transparent;
&:focus {
outline: none;
}
}
.icon {
padding-left: 5px;
padding-top: 5px;
padding-right: 5px;
width: 22px;
height: 22px;
}
}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment