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

Changed title styling, switched to React Icons

This commit is contained in:
mikwee 2021-11-22 19:53:01 +02:00
parent e247f43864
commit 3dcfe5cda4
5 changed files with 16 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -14,6 +14,7 @@
"react-bootstrap": "^2.0.2",
"react-bootstrap-icons": "^1.5.0",
"react-dom": "^17.0.2",
"react-icons": "^4.3.1",
"react-scripts": "4.0.3",
"sass": "^1.43.4",
"svg-jsx-loader": "^1.0.1",

1
src/App.css
View File

@ -15,7 +15,6 @@
text-align: center;
margin-top: 3%;
font-family: "Roboto";
text-decoration: underline;
color: white;
}
#container {

18
src/App.js
View File

@ -1,7 +1,7 @@
import './App.css';
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 { BsFacebook, BsInstagram, BsTwitter, BsGithub, BsYoutube, BsLinkedin, BsPinterest, BsReddit } from 'react-icons/bs';
import Tumblr from './icons/Tumblr';
import './styles/roots.scss';
import data from './roots.json'
@ -15,31 +15,31 @@ function App() {
<div id="container">
{data.links.map((rootDetail, index)=>{
if(rootDetail.type === "facebook") {
res = <Button className="roots" id="facebook" variant="primary" href={rootDetail.url}><Facebook/> {rootDetail.text}</Button>
res = <Button className="roots" id="facebook" variant="primary" href={rootDetail.url}><BsFacebook/> {rootDetail.text}</Button>
}
else if(rootDetail.type === "instagram") {
res = <Button className="roots" id="instagram" variant="primary" href={rootDetail.url}><Instagram/> {rootDetail.text}</Button>
res = <Button className="roots" id="instagram" variant="primary" href={rootDetail.url}><BsInstagram/> {rootDetail.text}</Button>
}
else if (rootDetail.type === "twitter") {
res = <Button className="roots" id="twitter" variant="primary" href={rootDetail.url}><Twitter/> {rootDetail.text}</Button>
res = <Button className="roots" id="twitter" variant="primary" href={rootDetail.url}><BsTwitter/> {rootDetail.text}</Button>
}
else if (rootDetail.type === "github") {
res = <Button className="roots" id="github" variant="primary" href={rootDetail.url}><Github/> {rootDetail.text}</Button>
res = <Button className="roots" id="github" variant="primary" href={rootDetail.url}><BsGithub/> {rootDetail.text}</Button>
}
else if (rootDetail.type === "youtube") {
res = <Button className="roots" id="youtube" variant="primary" href={rootDetail.url}><Youtube/> {rootDetail.text}</Button>
res = <Button className="roots" id="youtube" variant="primary" href={rootDetail.url}><BsYoutube/> {rootDetail.text}</Button>
}
else if (rootDetail.type === "linkedin") {
res = <Button className="roots" id="linkedin" variant="primary" href={rootDetail.url}><Linkedin/> {rootDetail.text}</Button>
res = <Button className="roots" id="linkedin" variant="primary" href={rootDetail.url}><BsLinkedin/> {rootDetail.text}</Button>
}
else if (rootDetail.type === "pinterest") {
res = <Button className="roots" id="pinterest" variant="primary" href={rootDetail.url}><Pinterest/> {rootDetail.text}</Button>
res = <Button className="roots" id="pinterest" variant="primary" href={rootDetail.url}><BsPinterest/> {rootDetail.text}</Button>
}
else if (rootDetail.type === "tumblr") {
res = <Button className="roots" id="tumblr" variant="primary" href={rootDetail.url}><Tumblr viewBox="250 0 300 200" width="32px" height="32px"/> {rootDetail.text}</Button>
}
else if (rootDetail.type === "reddit") {
res = <Button className="roots" id="reddit" variant="primary" href={rootDetail.url}><Reddit/> {rootDetail.text}</Button>
res = <Button className="roots" id="reddit" variant="primary" href={rootDetail.url}><BsReddit/> {rootDetail.text}</Button>
}
else if (rootDetail.type === "basic") {
res = <Button className="roots" variant="primary" href={rootDetail.url}>{rootDetail.text}</Button>

2
src/index.js
View File

@ -3,7 +3,7 @@ import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import "@fontsource/roboto/500-italic.css";
import "@fontsource/roboto/500.css";
ReactDOM.render(
<React.StrictMode>

5
yarn.lock
View File

@ -9379,6 +9379,11 @@ react-error-overlay@^6.0.9:
resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.9.tgz#3c743010c9359608c375ecd6bc76f35d93995b0a"
integrity sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew==
react-icons@^4.3.1:
version "4.3.1"
resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.3.1.tgz#2fa92aebbbc71f43d2db2ed1aed07361124e91ca"
integrity sha512-cB10MXLTs3gVuXimblAdI71jrJx8njrJZmNMEMC+sQu5B/BIOmlsAjskdqpn81y8UBVEGuHODd7/ci5DvoSzTQ==
react-is@^16.3.2, react-is@^16.8.1:
version "16.13.1"
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"