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

Button layout

Browse source
This commit is contained in:
mikwee 2021-11-20 20:52:37 +02:00
parent fc283bac04
commit e247f43864
3 changed files with 16 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/App.css
View file

@ -20,6 +20,8 @@
} }
#container { #container {
display: flex; display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center; justify-content: center;
margin-top: 3%; margin-top: 3%;
} }

20
src/App.js
View file

@ -15,34 +15,34 @@ function App() {
<div id="container"> <div id="container">
{data.links.map((rootDetail, index)=>{ {data.links.map((rootDetail, index)=>{
if(rootDetail.type === "facebook") { if(rootDetail.type === "facebook") {
res = <Button id="facebook" variant="primary" href={rootDetail.url}><Facebook/> {rootDetail.text}</Button> res = <Button className="roots" id="facebook" variant="primary" href={rootDetail.url}><Facebook/> {rootDetail.text}</Button>
} }
else if(rootDetail.type === "instagram") { else if(rootDetail.type === "instagram") {
res = <Button id="instagram" variant="primary" href={rootDetail.url}><Instagram/> {rootDetail.text}</Button> res = <Button className="roots" id="instagram" variant="primary" href={rootDetail.url}><Instagram/> {rootDetail.text}</Button>
} }
else if (rootDetail.type === "twitter") { else if (rootDetail.type === "twitter") {
res = <Button id="twitter" variant="primary" href={rootDetail.url}><Twitter/> {rootDetail.text}</Button> res = <Button className="roots" id="twitter" variant="primary" href={rootDetail.url}><Twitter/> {rootDetail.text}</Button>
} }
else if (rootDetail.type === "github") { else if (rootDetail.type === "github") {
res = <Button id="github" variant="primary" href={rootDetail.url}><Github/> {rootDetail.text}</Button> res = <Button className="roots" id="github" variant="primary" href={rootDetail.url}><Github/> {rootDetail.text}</Button>
} }
else if (rootDetail.type === "youtube") { else if (rootDetail.type === "youtube") {
res = <Button id="youtube" variant="primary" href={rootDetail.url}><Youtube/> {rootDetail.text}</Button> res = <Button className="roots" id="youtube" variant="primary" href={rootDetail.url}><Youtube/> {rootDetail.text}</Button>
} }
else if (rootDetail.type === "linkedin") { else if (rootDetail.type === "linkedin") {
res = <Button id="linkedin" variant="primary" href={rootDetail.url}><Linkedin/> {rootDetail.text}</Button> res = <Button className="roots" id="linkedin" variant="primary" href={rootDetail.url}><Linkedin/> {rootDetail.text}</Button>
} }
else if (rootDetail.type === "pinterest") { else if (rootDetail.type === "pinterest") {
res = <Button id="pinterest" variant="primary" href={rootDetail.url}><Pinterest/> {rootDetail.text}</Button> res = <Button className="roots" id="pinterest" variant="primary" href={rootDetail.url}><Pinterest/> {rootDetail.text}</Button>
} }
else if (rootDetail.type === "tumblr") { else if (rootDetail.type === "tumblr") {
res = <Button id="tumblr" variant="primary" href={rootDetail.url}><Tumblr viewBox="250 0 300 200" width="32px" height="32px"/> {rootDetail.text}</Button> 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") { else if (rootDetail.type === "reddit") {
res = <Button id="reddit" variant="primary" href={rootDetail.url}><Reddit/> {rootDetail.text}</Button> res = <Button className="roots" id="reddit" variant="primary" href={rootDetail.url}><Reddit/> {rootDetail.text}</Button>
} }
else if (rootDetail.type === "basic") { else if (rootDetail.type === "basic") {
res = <Button variant="primary" href={rootDetail.url}>{rootDetail.text}</Button> res = <Button className="roots" variant="primary" href={rootDetail.url}>{rootDetail.text}</Button>
} }
else { else {
// throw "One of your roots has an unrecognized type. Check out the documentation for the supported types."; // throw "One of your roots has an unrecognized type. Check out the documentation for the supported types.";

4
src/styles/roots.scss
View file

@ -1,6 +1,10 @@
$btn-border-radius: 25px; $btn-border-radius: 25px;
$btn-border-width: 0px; $btn-border-width: 0px;
.roots {
margin: 0 auto;
margin-bottom: 1%;
}
#facebook { #facebook {
background-color: #1877f2; background-color: #1877f2;
} }