Creating the button generator, stylizing Reddit

src/App.js

@@ -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>
+        <ButtonGroup vertical>
-        {data.links.map((rootDetail, index)=>{
+          {data.links.map((rootDetail, index)=>{
-          if(rootDetail.type == "facebook") {
+            if(rootDetail.type === "facebook") {
-            res = <AwesomeButton className="roots"></AwesomeButton>
+              res = <Button id="facebook" variant="primary"><Facebook/> {rootDetail.text}</Button>
-          }
+            }
-          else if (rootDetail.type === "basic") {
+            else if(rootDetail.type === "instagram") {
-            res = 
+              res = <Button id="instagram" variant="primary"><Instagram/> {rootDetail.text}</Button>
-          }
+            }
-          else {
+            else if (rootDetail.type === "twitter") {
-            // throw "One of your roots has an unrecognized type. Check out the documentation for the supported types.";
+              res = <Button id="twitter" variant="primary"><Twitter/> {rootDetail.text}</Button>
-          }
+            }
-          return res;
+            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>
   );

src/styles/roots.scss

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