Adding a demo button

package.json

@@ -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",

src/App.css

@@ -22,4 +22,4 @@
   display: flex;
   justify-content: center;
   margin-top: 3%;
-}
+}

src/App.js

@@ -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>

src/button/Button.jsx

@@ -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>
+    );
+};

src/styles/facebook.scss

@@ -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;
+    }