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",
|
||||
"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"
|
||||
|
|
|
@ -17,4 +17,7 @@
|
|||
font-family: "Roboto";
|
||||
text-decoration: underline;
|
||||
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 {AwesomeButton} from 'react-awesome-button';
|
||||
import "react-awesome-button/dist/styles.css";
|
||||
import {AwesomeButton, AwesomeButtonSocial} from 'react-awesome-button';
|
||||
import AwesomeButtonStyle from "react-awesome-button/dist/styles.css";
|
||||
import data from './roots.json'
|
||||
|
||||
function App() {
|
||||
var res;
|
||||
const socialTypes = ["facebook", "instagram", "twitter", "github", "youtube", "linkedin", "pinterest", "messenger", "whatsapp"];
|
||||
|
||||
return (
|
||||
<div className="App">
|
||||
<div id="bg"></div>
|
||||
<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>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -8986,6 +8986,13 @@ react-awesome-button@^6.5.1:
|
|||
dependencies:
|
||||
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:
|
||||
version "11.0.4"
|
||||
resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-11.0.4.tgz#a7ccb60257a1ca2e0efe7a83e38e6700d17aa37a"
|
||||
|
|
Loading…
Reference in New Issue