Build a button component using bootstrap #7

Author: gracemwendwa

src/components/Button.js

@@ -0,0 +1,21 @@
+import React from 'react'
+import { Link } from 'react-router-dom';
+
+const Button = (props) => {
+  switch (props.btnType) {
+    case 'success':
+      return (<button
+        {...props}
+        onClick={props.onClick || (() => { })}
+        className={`btn btn-success ${props.className || ''} ${props.class || ''}`}
+        type="button">
+        {props.children}
+      </button>);
+    case 'success-as-link':
+      return (<Link {...props} className={`btn btn-success ${props.className}`}>{props.children}</Link>)
+    default:
+      return (<button {...props}>{props.children}</button>);
+  }
+};
+
+export default Button

src/components/footer.js

@@ -1,6 +1,7 @@
 import React from 'react'
 import { Link } from 'react-router-dom'
 import { BsLinkedin, BsTwitter, BsFacebook } from "react-icons/bs";
+import Button from './Button';
 
 
 const Footer = () => {
@@ -73,7 +74,7 @@ const Footer = () => {
               <div className="d-flex flex-column flex-sm-row w-100 gap-2">
                 <label htmlFor="newsletter1" className="visually-hidden">Email address</label>
                 <input id="newsletter1" type="text" className="form-control" placeholder="Email address" />
-                <button className="btn btn-success" type="button">Subscribe</button>
+                <Button btnType="success">Subscribe</Button>
               </div>
             </form>
           </div>

src/components/navbar.js

@@ -1,16 +1,17 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 import { images } from '../assets';
+import Button from './Button';
 
 
 const NavBar = () => {
   return (
     <nav class="navbar navbar-expand-lg bg-body-tertiary">
       <div class="container-fluid">
         {/* <div class="navbar-brand" href="#">Navbar</div> */}
-        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+        <Button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
           <span class="navbar-toggler-icon"></span>
-        </button>
+        </Button>
         <div class="collapse navbar-collapse" id="navbarSupportedContent">
           <ul class="navbar-nav me-auto mb-2 mb-lg-0">
             <li class="nav-item align-items-center px-2">
@@ -74,7 +75,7 @@ const NavBar = () => {
           </ul>
           {/* <form className="d-flex" role="search"> */}
             {/* <input className="form-control me-2" type="search" placeholder="Search" aria-label="Search" />
-            <button className="btn btn-outline-success" type="submit">Search</button> */}
+            <Button className="btn btn-outline-success" type="submit">Search</Button> */}
           {/* </form> */}
         </div>
       </div>

src/containers/FootballClub/index.js

@@ -4,6 +4,7 @@ import Navbar from '../../components/navbar';
 import Footer from '../../components/footer';
 import { BsArrowRight } from 'react-icons/bs';
 import { images } from '../../assets';
+import Button from '../../components/Button';
 
 
 const players = [
@@ -65,7 +66,7 @@ const FootballClub = () => {
         </div>
         <nav>
         <div className="nav nav-tabs" id="myTab" role="tablist">
-          <button
+          <Button
             className="nav-link active text-success" 
             id="nav-home-tab" 
             data-bs-toggle="tab" 
@@ -76,8 +77,8 @@ const FootballClub = () => {
             aria-selected="true"
           >
             Overview
-          </button>
-          <button 
+          </Button>
+          <Button 
             className="nav-link text-success" 
             id="nav-profile-tab" 
             data-bs-toggle="tab" 
@@ -88,8 +89,8 @@ const FootballClub = () => {
             aria-selected="false"
           >
             Squad
-          </button>
-          <button
+          </Button>
+          <Button
             className="nav-link text-success" 
             id="nav-contact-tab" 
             data-bs-toggle="tab" 
@@ -100,8 +101,8 @@ const FootballClub = () => {
             aria-selected="false"
           >
             Fixtures
-          </button>
-          <button 
+          </Button>
+          <Button 
             className="nav-link text-success" 
             id="nav-home-tab" 
             data-bs-toggle="tab" 
@@ -112,7 +113,7 @@ const FootballClub = () => {
             aria-selected="true"
           >
             Stats
-          </button>
+          </Button>
         </div>
         </nav>
         <div className="tab-content" id="nav-tabContent">

src/containers/HomeScreen/featured.js

@@ -1,6 +1,7 @@
 import React from 'react'
 import { BsCode, BsBicycle, BsBook } from "react-icons/bs";
 import { Link } from 'react-router-dom';
+import Button from '../../components/Button';
 
 const Featured = () => {
   return (
@@ -24,7 +25,8 @@ const Featured = () => {
           <div>
             <h3 class="fs-2">Sports</h3>
             <p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
-            <Link className='btn btn-success' to="/sports">Learn More</Link>
+            <Button btnType='success-as-link' to="/sports">Learn More</Button>
+
           </div>
         </div>
         <div class="col d-flex align-items-start">
@@ -34,7 +36,7 @@ const Featured = () => {
           <div>
             <h3 class="fs-2">Education</h3>
             <p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
-            <button className='btn btn-success'>Learn More</button>
+            <Button btnType='success'>Learn More</Button>
           </div>
         </div>
       </div>

src/containers/HomeScreen/gallery.js

@@ -1,5 +1,6 @@
 import React from 'react'
 import { images } from '../../assets';
+import Button from '../../components/Button';
 
 
 const assets = [
@@ -66,14 +67,14 @@ const Gallery = () => {
                 )
               })
             }
-            <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleAutoplaying" data-bs-slide="prev">
+            <Button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleAutoplaying" data-bs-slide="prev">
               <span class="carousel-control-prev-icon" aria-hidden="true"></span>
               <span class="visually-hidden">Previous</span>
-            </button>
-            <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleAutoplaying" data-bs-slide="next">
+            </Button>
+            <Button class="carousel-control-next" type="button" data-bs-target="#carouselExampleAutoplaying" data-bs-slide="next">
               <span class="carousel-control-next-icon" aria-hidden="true"></span>
               <span class="visually-hidden">Next</span>
-            </button>
+            </Button>
           </div>
         </div>
       </div>

src/containers/HomeScreen/top-section.js

@@ -1,5 +1,6 @@
 import React from 'react'
 import { images } from '../../assets';
+import Button from '../../components/Button';
 
 const TopSection = () => {
   return (
@@ -13,7 +14,7 @@ const TopSection = () => {
             The organization is looking forward to empowering the community <br />
             Through technology, talent, and education
           </p>
-          <button type='button' className='btn btn-success'>Learn More</button>
+          <Button btnType="success">Learn More</Button>
         </div>
       </div>
       <div className='col-md-5'>

src/containers/LoginScreen/index.js

@@ -1,6 +1,7 @@
 import React from 'react'
 import { Link } from 'react-router-dom'
 import { images } from '../../assets'
+import Button from '../../components/Button'
 import Footer from '../../components/footer'
 import NavBar from '../../components/navbar'
 
@@ -14,18 +15,18 @@ const LoginScreen = () => {
           <img className="mb-4" src={images.logo} alt="" width="72" height="57" />
           <h1 className="h3 mb-3 fw-normal">Please sign in</h1>
           <div className="w-50 form-floating mb-3">
-            <input 
-              type="email" 
-              className="form-control" 
-              id="floatingInput" 
+            <input
+              type="email"
+              className="form-control"
+              id="floatingInput"
               placeholder="[email protected]"
             />
             <label htmlFor="floatingInput">Email address</label>
           </div>
           <div className="w-50 form-floating mb-3">
-            <input 
-              type="password" 
-              className="form-control" 
+            <input
+              type="password"
+              className="form-control"
               id="floatingPassword"
               placeholder="Password"
             />
@@ -37,12 +38,13 @@ const LoginScreen = () => {
             </label>
           </div>
           <Link to="/dashboard">
-            <button
-              className="w-50 btn btn-lg btn-success"
+            <Button
+              className="w-50 btn-lg"
+              btnType="success"
               type="submit"
             >
               Sign in
-            </button>
+            </Button>
           </Link>
         </form>
       </div>

src/containers/SignupSoftware/index.js

@@ -2,6 +2,7 @@ import React from 'react';
 import Navbar from '../../components/navbar';
 import { Link } from 'react-router-dom';
 import Footer from '../../components/footer'
+import Button from '../../components/Button';
 
 const RegisterSoftware = () => {
   return (
@@ -17,7 +18,7 @@ const RegisterSoftware = () => {
                 Register To Learn Software
               </h3>
               <p className="col-lg-12 fs-5">
-                Get the best out of our programs and be an expert in one of the fields below: 
+                Get the best out of our programs and be an expert in one of the fields below:
               </p>
               <ul>
                 <li>Full-stack Engineer</li>
@@ -51,7 +52,12 @@ const RegisterSoftware = () => {
                   <input type="password" className="form-control" id="floatingPassword" placeholder="Password" />
                   <label htmlFor="floatingPassword">Password</label>
                 </div>
-                <button className="w-100 btn btn-lg btn-success" type="submit">Sign up</button>
+                <Button
+                  btnType="success"
+                  className="w-100 btn-lg"
+                  type="submit">
+                  Sign up
+                </Button>
                 <div className='d-flex mt-2'>
                   <p className='px-2'>Already have an account?</p>
                   <Link className='link-success' to="/login">Login</Link>