2021-10-09 12:58:33 +00:00
|
|
|
import './App.css';
|
2021-11-23 11:19:29 +00:00
|
|
|
import {Button} from 'react-bootstrap';
|
2021-11-05 15:18:23 +00:00
|
|
|
import 'bootstrap/dist/css/bootstrap.min.css';
|
2021-11-22 19:26:52 +00:00
|
|
|
import { IconContext } from 'react-icons/lib';
|
2021-11-22 17:53:01 +00:00
|
|
|
import { BsFacebook, BsInstagram, BsTwitter, BsGithub, BsYoutube, BsLinkedin, BsPinterest, BsReddit } from 'react-icons/bs';
|
2021-11-22 18:00:44 +00:00
|
|
|
import {GrTumblr} from 'react-icons/gr';
|
2021-11-05 15:29:32 +00:00
|
|
|
import './styles/roots.scss';
|
2021-10-14 16:56:16 +00:00
|
|
|
import data from './roots.json'
|
2021-10-09 12:58:33 +00:00
|
|
|
|
|
|
|
function App() {
|
2021-11-08 18:46:20 +00:00
|
|
|
var res;
|
2021-10-15 15:58:37 +00:00
|
|
|
|
2021-10-09 12:58:33 +00:00
|
|
|
return (
|
|
|
|
<div className="App">
|
2021-10-14 16:56:16 +00:00
|
|
|
<h1 id="title">{data.title}</h1>
|
2021-11-08 19:10:24 +00:00
|
|
|
<div id="container">
|
2021-11-16 17:37:15 +00:00
|
|
|
{data.links.map((rootDetail, index)=>{
|
|
|
|
if(rootDetail.type === "facebook") {
|
2021-11-22 17:53:01 +00:00
|
|
|
res = <Button className="roots" id="facebook" variant="primary" href={rootDetail.url}><BsFacebook/> {rootDetail.text}</Button>
|
2021-11-16 17:37:15 +00:00
|
|
|
}
|
|
|
|
else if(rootDetail.type === "instagram") {
|
2021-11-22 17:53:01 +00:00
|
|
|
res = <Button className="roots" id="instagram" variant="primary" href={rootDetail.url}><BsInstagram/> {rootDetail.text}</Button>
|
2021-11-16 17:37:15 +00:00
|
|
|
}
|
|
|
|
else if (rootDetail.type === "twitter") {
|
2021-11-22 17:53:01 +00:00
|
|
|
res = <Button className="roots" id="twitter" variant="primary" href={rootDetail.url}><BsTwitter/> {rootDetail.text}</Button>
|
2021-11-16 17:37:15 +00:00
|
|
|
}
|
|
|
|
else if (rootDetail.type === "github") {
|
2021-11-22 17:53:01 +00:00
|
|
|
res = <Button className="roots" id="github" variant="primary" href={rootDetail.url}><BsGithub/> {rootDetail.text}</Button>
|
2021-11-16 17:37:15 +00:00
|
|
|
}
|
|
|
|
else if (rootDetail.type === "youtube") {
|
2021-11-22 17:53:01 +00:00
|
|
|
res = <Button className="roots" id="youtube" variant="primary" href={rootDetail.url}><BsYoutube/> {rootDetail.text}</Button>
|
2021-11-16 17:37:15 +00:00
|
|
|
}
|
|
|
|
else if (rootDetail.type === "linkedin") {
|
2021-11-22 17:53:01 +00:00
|
|
|
res = <Button className="roots" id="linkedin" variant="primary" href={rootDetail.url}><BsLinkedin/> {rootDetail.text}</Button>
|
2021-11-16 17:37:15 +00:00
|
|
|
}
|
|
|
|
else if (rootDetail.type === "pinterest") {
|
2021-11-22 17:53:01 +00:00
|
|
|
res = <Button className="roots" id="pinterest" variant="primary" href={rootDetail.url}><BsPinterest/> {rootDetail.text}</Button>
|
2021-11-16 17:37:15 +00:00
|
|
|
}
|
|
|
|
else if (rootDetail.type === "tumblr") {
|
2021-11-23 11:35:22 +00:00
|
|
|
res = <Button className="roots" id="tumblr" variant="primary" href={rootDetail.url}><IconContext.Provider value={{size: "1em"}}><GrTumblr/></IconContext.Provider> <div className="text">{rootDetail.text}</div></Button>
|
2021-11-16 17:37:15 +00:00
|
|
|
}
|
|
|
|
else if (rootDetail.type === "reddit") {
|
2021-11-22 17:53:01 +00:00
|
|
|
res = <Button className="roots" id="reddit" variant="primary" href={rootDetail.url}><BsReddit/> {rootDetail.text}</Button>
|
2021-11-16 17:37:15 +00:00
|
|
|
}
|
|
|
|
else if (rootDetail.type === "basic") {
|
2021-11-20 18:52:37 +00:00
|
|
|
res = <Button className="roots" variant="primary" href={rootDetail.url}>{rootDetail.text}</Button>
|
2021-11-16 17:37:15 +00:00
|
|
|
}
|
|
|
|
return res;
|
|
|
|
})}
|
2021-11-08 19:10:24 +00:00
|
|
|
</div>
|
2021-11-23 12:40:22 +00:00
|
|
|
<footer style={{color: "white"}}>Made with <a href="https://gitdab.com/mikwee/linkroots">LinkRoots</a></footer>
|
2021-10-09 12:58:33 +00:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
export default App;
|