Removed Button Group
This commit is contained in:
		
							parent
							
								
									4c9665633c
								
							
						
					
					
						commit
						fc283bac04
					
				
					 1 changed files with 36 additions and 38 deletions
				
			
		
							
								
								
									
										74
									
								
								src/App.js
									
										
									
									
									
								
							
							
						
						
									
										74
									
								
								src/App.js
									
										
									
									
									
								
							| 
						 | 
				
			
			@ -13,44 +13,42 @@ function App() {
 | 
			
		|||
    <div className="App">
 | 
			
		||||
      <h1 id="title">{data.title}</h1>
 | 
			
		||||
      <div id="container">
 | 
			
		||||
        <ButtonGroup vertical>
 | 
			
		||||
          {data.links.map((rootDetail, index)=>{
 | 
			
		||||
            if(rootDetail.type === "facebook") {
 | 
			
		||||
              res = <Button id="facebook" variant="primary" href={rootDetail.url}><Facebook/> {rootDetail.text}</Button>
 | 
			
		||||
            }
 | 
			
		||||
            else if(rootDetail.type === "instagram") {
 | 
			
		||||
              res = <Button id="instagram" variant="primary" href={rootDetail.url}><Instagram/> {rootDetail.text}</Button>
 | 
			
		||||
            }
 | 
			
		||||
            else if (rootDetail.type === "twitter") {
 | 
			
		||||
              res = <Button id="twitter" variant="primary" href={rootDetail.url}><Twitter/> {rootDetail.text}</Button>
 | 
			
		||||
            }
 | 
			
		||||
            else if (rootDetail.type === "github") {
 | 
			
		||||
              res = <Button id="github" variant="primary" href={rootDetail.url}><Github/> {rootDetail.text}</Button>
 | 
			
		||||
            }
 | 
			
		||||
            else if (rootDetail.type === "youtube") {
 | 
			
		||||
              res = <Button id="youtube" variant="primary" href={rootDetail.url}><Youtube/> {rootDetail.text}</Button>
 | 
			
		||||
            }
 | 
			
		||||
            else if (rootDetail.type === "linkedin") {
 | 
			
		||||
              res = <Button id="linkedin" variant="primary" href={rootDetail.url}><Linkedin/> {rootDetail.text}</Button>
 | 
			
		||||
            }
 | 
			
		||||
            else if (rootDetail.type === "pinterest") {
 | 
			
		||||
              res = <Button id="pinterest" variant="primary" href={rootDetail.url}><Pinterest/> {rootDetail.text}</Button>
 | 
			
		||||
            }
 | 
			
		||||
            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>
 | 
			
		||||
            }
 | 
			
		||||
            else if (rootDetail.type === "reddit") {
 | 
			
		||||
              res = <Button id="reddit" variant="primary" href={rootDetail.url}><Reddit/> {rootDetail.text}</Button>
 | 
			
		||||
            }
 | 
			
		||||
            else if (rootDetail.type === "basic") {
 | 
			
		||||
              res = <Button variant="primary" href={rootDetail.url}>{rootDetail.text}</Button>
 | 
			
		||||
            }
 | 
			
		||||
            else {
 | 
			
		||||
              // throw "One of your roots has an unrecognized type. Check out the documentation for the supported types.";
 | 
			
		||||
            }
 | 
			
		||||
            return res;
 | 
			
		||||
          })}
 | 
			
		||||
        </ButtonGroup>
 | 
			
		||||
        {data.links.map((rootDetail, index)=>{
 | 
			
		||||
          if(rootDetail.type === "facebook") {
 | 
			
		||||
            res = <Button id="facebook" variant="primary" href={rootDetail.url}><Facebook/> {rootDetail.text}</Button>
 | 
			
		||||
          }
 | 
			
		||||
          else if(rootDetail.type === "instagram") {
 | 
			
		||||
            res = <Button id="instagram" variant="primary" href={rootDetail.url}><Instagram/> {rootDetail.text}</Button>
 | 
			
		||||
          }
 | 
			
		||||
          else if (rootDetail.type === "twitter") {
 | 
			
		||||
            res = <Button id="twitter" variant="primary" href={rootDetail.url}><Twitter/> {rootDetail.text}</Button>
 | 
			
		||||
          }
 | 
			
		||||
          else if (rootDetail.type === "github") {
 | 
			
		||||
            res = <Button id="github" variant="primary" href={rootDetail.url}><Github/> {rootDetail.text}</Button>
 | 
			
		||||
          }
 | 
			
		||||
          else if (rootDetail.type === "youtube") {
 | 
			
		||||
            res = <Button id="youtube" variant="primary" href={rootDetail.url}><Youtube/> {rootDetail.text}</Button>
 | 
			
		||||
          }
 | 
			
		||||
          else if (rootDetail.type === "linkedin") {
 | 
			
		||||
            res = <Button id="linkedin" variant="primary" href={rootDetail.url}><Linkedin/> {rootDetail.text}</Button>
 | 
			
		||||
          }
 | 
			
		||||
          else if (rootDetail.type === "pinterest") {
 | 
			
		||||
            res = <Button id="pinterest" variant="primary" href={rootDetail.url}><Pinterest/> {rootDetail.text}</Button>
 | 
			
		||||
          }
 | 
			
		||||
          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>
 | 
			
		||||
          }
 | 
			
		||||
          else if (rootDetail.type === "reddit") {
 | 
			
		||||
            res = <Button id="reddit" variant="primary" href={rootDetail.url}><Reddit/> {rootDetail.text}</Button>
 | 
			
		||||
          }
 | 
			
		||||
          else if (rootDetail.type === "basic") {
 | 
			
		||||
            res = <Button variant="primary" href={rootDetail.url}>{rootDetail.text}</Button>
 | 
			
		||||
          }
 | 
			
		||||
          else {
 | 
			
		||||
            // throw "One of your roots has an unrecognized type. Check out the documentation for the supported types.";
 | 
			
		||||
          }
 | 
			
		||||
          return res;
 | 
			
		||||
        })}
 | 
			
		||||
      </div>
 | 
			
		||||
    </div>
 | 
			
		||||
  );
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue