Starting to make the buttons
This commit is contained in:
parent
07d82da3b1
commit
c839ee41b1
|
@ -0,0 +1,16 @@
|
||||||
|
{
|
||||||
|
// Use IntelliSense to learn about possible attributes.
|
||||||
|
// Hover to view descriptions of existing attributes.
|
||||||
|
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
|
||||||
|
"version": "0.2.0",
|
||||||
|
"configurations": [
|
||||||
|
{
|
||||||
|
"type": "pwa-chrome",
|
||||||
|
"request": "launch",
|
||||||
|
"name": "Launch Chrome against localhost",
|
||||||
|
"url": "http://localhost:8080",
|
||||||
|
"webRoot": "${workspaceFolder}",
|
||||||
|
"runtimeExecutable": "C:/Users/mikwee/AppData/Local/Chromium/Application/chrome.exe"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
|
@ -9,6 +9,7 @@
|
||||||
"@testing-library/user-event": "^12.1.10",
|
"@testing-library/user-event": "^12.1.10",
|
||||||
"react": "^17.0.2",
|
"react": "^17.0.2",
|
||||||
"react-awesome-button": "^6.5.1",
|
"react-awesome-button": "^6.5.1",
|
||||||
|
"react-bootstrap-icons": "^1.5.0",
|
||||||
"react-dom": "^17.0.2",
|
"react-dom": "^17.0.2",
|
||||||
"react-scripts": "4.0.3",
|
"react-scripts": "4.0.3",
|
||||||
"web-vitals": "^1.0.1"
|
"web-vitals": "^1.0.1"
|
||||||
|
|
|
@ -17,4 +17,7 @@
|
||||||
font-family: "Roboto";
|
font-family: "Roboto";
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
color: white;
|
color: white;
|
||||||
|
}
|
||||||
|
.roots {
|
||||||
|
display: block;
|
||||||
}
|
}
|
22
src/App.js
22
src/App.js
|
@ -1,15 +1,27 @@
|
||||||
import logo from './logo.svg';
|
|
||||||
import './App.css';
|
import './App.css';
|
||||||
import {AwesomeButton} from 'react-awesome-button';
|
import {AwesomeButton, AwesomeButtonSocial} from 'react-awesome-button';
|
||||||
import "react-awesome-button/dist/styles.css";
|
import AwesomeButtonStyle from "react-awesome-button/dist/styles.css";
|
||||||
import data from './roots.json'
|
import data from './roots.json'
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
|
var res;
|
||||||
|
const socialTypes = ["facebook", "instagram", "twitter", "github", "youtube", "linkedin", "pinterest", "messenger", "whatsapp"];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="App">
|
<div className="App">
|
||||||
<div id="bg"></div>
|
|
||||||
<h1 id="title">{data.title}</h1>
|
<h1 id="title">{data.title}</h1>
|
||||||
{}
|
{data.links.map((rootDetail, index)=>{
|
||||||
|
if(socialTypes.includes(rootDetail.type)) {
|
||||||
|
res = <button className="roots">{rootDetail.text}</button>
|
||||||
|
}
|
||||||
|
else if (rootDetail.type === "basic") {
|
||||||
|
res = <button className="roots">{rootDetail.text}</button>
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
// throw "One of your roots has an unrecognized type. Check out the documentation for the supported types.";
|
||||||
|
}
|
||||||
|
return res;
|
||||||
|
})}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -8986,6 +8986,13 @@ react-awesome-button@^6.5.1:
|
||||||
dependencies:
|
dependencies:
|
||||||
web-animation-club "^0.6.0"
|
web-animation-club "^0.6.0"
|
||||||
|
|
||||||
|
react-bootstrap-icons@^1.5.0:
|
||||||
|
version "1.5.0"
|
||||||
|
resolved "https://registry.yarnpkg.com/react-bootstrap-icons/-/react-bootstrap-icons-1.5.0.tgz#30ccd09cac69e4037c4cb500cc704d04c4a466a4"
|
||||||
|
integrity sha512-QC5q4meHQG0cO9RJzeDLSqZ1gbVa9jxFCpONCE3GYl2FkbAKSyJAEsONlzTApbZ8/oG87gPWq0xAyn5SZ/Jafw==
|
||||||
|
dependencies:
|
||||||
|
prop-types "^15.7.2"
|
||||||
|
|
||||||
react-dev-utils@^11.0.3:
|
react-dev-utils@^11.0.3:
|
||||||
version "11.0.4"
|
version "11.0.4"
|
||||||
resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-11.0.4.tgz#a7ccb60257a1ca2e0efe7a83e38e6700d17aa37a"
|
resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-11.0.4.tgz#a7ccb60257a1ca2e0efe7a83e38e6700d17aa37a"
|
||||||
|
|
Loading…
Reference in New Issue