Adding a demo button
This commit is contained in:
parent
bfa21552be
commit
1a516e3bf5
6 changed files with 2043 additions and 2206 deletions
|
@ -7,13 +7,14 @@
|
|||
"@testing-library/jest-dom": "^5.11.4",
|
||||
"@testing-library/react": "^11.1.0",
|
||||
"@testing-library/user-event": "^12.1.10",
|
||||
"css-loader": "^6.5.0",
|
||||
"react": "^17.0.2",
|
||||
"react-awesome-button": "^6.5.1",
|
||||
"react-bootstrap-icons": "^1.5.0",
|
||||
"react-dom": "^17.0.2",
|
||||
"react-scripts": "4.0.3",
|
||||
"web-vitals": "^1.0.1",
|
||||
"webpack": "^5.60.0"
|
||||
"sass": "^1.43.4",
|
||||
"web-vitals": "^1.0.1"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
|
|
|
@ -22,4 +22,4 @@
|
|||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 3%;
|
||||
}
|
||||
}
|
|
@ -1,17 +1,17 @@
|
|||
import './App.css';
|
||||
import {AwesomeButton} from 'react-awesome-button';
|
||||
import AwesomeButtonStyle from "react-awesome-button/dist/styles.css";
|
||||
import FacebookStyle from './styles/facebook.scss';
|
||||
import { Button} from './button/Button';
|
||||
import data from './roots.json'
|
||||
|
||||
function App() {
|
||||
var res;
|
||||
const socialTypes = ["facebook", "instagram", "twitter", "github", "youtube", "linkedin", "pinterest", "messenger", "whatsapp"];
|
||||
|
||||
return (
|
||||
<div className="App">
|
||||
<h1 id="title">{data.title}</h1>
|
||||
<div id="container">
|
||||
|
||||
<AwesomeButton className="roots" cssModule={FacebookStyle} type="primary">Facebook</AwesomeButton>
|
||||
{/*{data.links.map((rootDetail, index)=>{
|
||||
if(rootDetail.type == "facebook") {
|
||||
res = <AwesomeButton className="roots"></AwesomeButton>
|
||||
|
|
|
@ -1,2 +1,25 @@
|
|||
import React from "react";
|
||||
import "./button.css";
|
||||
import "./button.css";
|
||||
|
||||
const STYLES = [
|
||||
"btn--primary--solid",
|
||||
"btn--warning--solid",
|
||||
"btn--solid--solid",
|
||||
"btn--success--solid",
|
||||
"btn--primary--outline",
|
||||
"btn--primary--outline",
|
||||
"btn--primary--outline",
|
||||
"btn--primary--outline",
|
||||
]
|
||||
|
||||
const SIZES = ["btn--medium", "btn--small"]
|
||||
|
||||
export const Button = ({children, type, onClick, buttonStyle, buttonSize}) => {
|
||||
const checkButtonStyle = STYLES.includes(buttonStyle) ? buttonStyle : STYLES[0];
|
||||
const checkButtonSize = SIZES.includes(buttonSize) ? buttonSize : SIZES[0];
|
||||
return (
|
||||
<button onClick={onClick} className={'btn ${setButtonStyle} ${setButtonSize}'} type={type}>
|
||||
{children}
|
||||
</button>
|
||||
);
|
||||
};
|
24
src/styles/facebook.scss
Normal file
24
src/styles/facebook.scss
Normal file
|
@ -0,0 +1,24 @@
|
|||
.aws-btn {
|
||||
--button-default-height: 51px;
|
||||
--button-default-font-size: 14px;
|
||||
--button-default-border-radius: 25px;
|
||||
--button-horizontal-padding: 20px;
|
||||
--button-raise-level: 0px;
|
||||
--button-hover-pressure: 0;
|
||||
--transform-speed: 0.175s;
|
||||
--button-primary-color: #1877f2;
|
||||
--button-primary-color-dark: #196eb8;
|
||||
--button-primary-color-light: #ffffff;
|
||||
--button-primary-color-hover: #1561a2;
|
||||
--button-primary-border: none;
|
||||
--button-secondary-color: #f2f6f9;
|
||||
--button-secondary-color-dark: #1360a4;
|
||||
--button-secondary-color-light: #1e88e5;
|
||||
--button-secondary-color-hover: #e1eaf1;
|
||||
--button-secondary-border: 2px solid #1e88e5;
|
||||
--button-anchor-color: #0e4f88;
|
||||
--button-anchor-color-dark: #072743;
|
||||
--button-anchor-color-light: #ffffff;
|
||||
--button-anchor-color-hover: #0d4a7f;
|
||||
--button-anchor-border: none;
|
||||
}
|
Loading…
Reference in a new issue