mikwee
/
linkroots
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Creating the button generator, stylizing Reddit

This commit is contained in:
mikwee 2021-11-08 20:46:20 +02:00
parent 4d038df5c1
commit 7d0b17170c
2 changed files with 44 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
src/App.js
View File

@ -1,29 +1,56 @@
import './App.css';
import {Button} from 'react-bootstrap';
import {Button, ButtonGroup} from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
import { Facebook, Instagram, Twitter, Github, Youtube, Linkedin, Pinterest, Reddit } from 'react-bootstrap-icons';
import './styles/roots.scss';
import data from './roots.json'
function App() {
var res;
const socialTypes = ["facebook", "instagram", "twitter", "github", "youtube", "linkedin", "pinterest"];
return (
<div className="App">
<h1 id="title">{data.title}</h1>
<div id="container">
<Button id="tumblr" variant="primary">Facebook</Button>
{data.links.map((rootDetail, index)=>{
if(rootDetail.type == "facebook") {
res = <AwesomeButton className="roots"></AwesomeButton>
}
else if (rootDetail.type === "basic") {
res =
}
else {
// throw "One of your roots has an unrecognized type. Check out the documentation for the supported types.";
}
return res;
})}
<ButtonGroup vertical>
{data.links.map((rootDetail, index)=>{
if(rootDetail.type === "facebook") {
res = <Button id="facebook" variant="primary"><Facebook/> {rootDetail.text}</Button>
}
else if(rootDetail.type === "instagram") {
res = <Button id="instagram" variant="primary"><Instagram/> {rootDetail.text}</Button>
}
else if (rootDetail.type === "twitter") {
res = <Button id="twitter" variant="primary"><Twitter/> {rootDetail.text}</Button>
}
else if (rootDetail.type === "github") {
res = <Button id="github" variant="primary"><Github/> {rootDetail.text}</Button>
}
else if (rootDetail.type === "youtube") {
res = <Button id="youtube" variant="primary"><Youtube/> {rootDetail.text}</Button>
}
else if (rootDetail.type === "linkedin") {
res = <Button id="linkedin" variant="primary"><Linkedin/> {rootDetail.text}</Button>
}
else if (rootDetail.type === "pinterest") {
res = <Button id="pinterest" variant="primary"><Pinterest/> {rootDetail.text}</Button>
}
else if (rootDetail.type === "tumblr") {
res = <Button id="tumblr" variant="primary">{rootDetail.text}</Button>
}
else if (rootDetail.type === "reddit") {
res = <Button id="reddit" variant="primary"><Reddit/> {rootDetail.text}</Button>
}
else if (rootDetail.type === "basic") {
res = <Button variant="primary">{rootDetail.text}</Button>
}
else {
// throw "One of your roots has an unrecognized type. Check out the documentation for the supported types.";
}
return res;
})}
</ButtonGroup>
</div>
</div>
);

3
src/styles/roots.scss
View File

@ -26,5 +26,8 @@ $btn-border-width: 0px;
#tumblr {
background-color: #35465c;
}
#reddit {
background-color: #ff4500;
}
@import "./node_modules/bootstrap/scss/bootstrap.scss";