From 52dc86f9673062fa107f9e7f155f6235135389a7 Mon Sep 17 00:00:00 2001
From: "mwendwagracie@gmail.com" <mwendwagracie@gmail.com>
Date: Fri, 3 Mar 2023 15:16:26 +0300
Subject: [PATCH]  Build a button component using bootstrap #7

---
 src/components/Button.js                      | 21 +++++++++
 src/components/footer.js                      |  3 +-
 src/components/navbar.js                      |  7 +--
 src/containers/FootballClub/index.js          | 17 ++++----
 src/containers/HomeScreen/featured.js         |  6 ++-
 src/containers/HomeScreen/gallery.js          |  9 ++--
 src/containers/HomeScreen/top-section.js      |  3 +-
 src/containers/LoginScreen/index.js           | 22 +++++-----
 src/containers/SignupSoftware/index.js        | 10 ++++-
 src/containers/SoftwareScreen/index.js        | 43 ++++++++++---------
 .../Sports/components/upcoming-events.js      | 11 ++---
 src/containers/Sports/index.js                |  5 ++-
 12 files changed, 99 insertions(+), 58 deletions(-)
 create mode 100644 src/components/Button.js

diff --git a/src/components/Button.js b/src/components/Button.js
new file mode 100644
index 0000000..1400c9d
--- /dev/null
+++ b/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
diff --git a/src/components/footer.js b/src/components/footer.js
index aeed9d3..c9f1bd1 100644
--- a/src/components/footer.js
+++ b/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>
diff --git a/src/components/navbar.js b/src/components/navbar.js
index 71b076d..427c4ec 100644
--- a/src/components/navbar.js
+++ b/src/components/navbar.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 import { images } from '../assets';
+import Button from './Button';
 
 
 const NavBar = () => {
@@ -8,9 +9,9 @@ const NavBar = () => {
     <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>
diff --git a/src/containers/FootballClub/index.js b/src/containers/FootballClub/index.js
index 49d4951..2a21ca4 100644
--- a/src/containers/FootballClub/index.js
+++ b/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">
diff --git a/src/containers/HomeScreen/featured.js b/src/containers/HomeScreen/featured.js
index 1148277..d66f6a8 100644
--- a/src/containers/HomeScreen/featured.js
+++ b/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>
diff --git a/src/containers/HomeScreen/gallery.js b/src/containers/HomeScreen/gallery.js
index 3b40338..1fe9cad 100644
--- a/src/containers/HomeScreen/gallery.js
+++ b/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>
diff --git a/src/containers/HomeScreen/top-section.js b/src/containers/HomeScreen/top-section.js
index 482c9cd..ce78b97 100644
--- a/src/containers/HomeScreen/top-section.js
+++ b/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'>
diff --git a/src/containers/LoginScreen/index.js b/src/containers/LoginScreen/index.js
index f55e174..7a05dd2 100644
--- a/src/containers/LoginScreen/index.js
+++ b/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="name@example.com"
             />
             <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>
diff --git a/src/containers/SignupSoftware/index.js b/src/containers/SignupSoftware/index.js
index 375c0cf..ea74564 100644
--- a/src/containers/SignupSoftware/index.js
+++ b/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>
diff --git a/src/containers/SoftwareScreen/index.js b/src/containers/SoftwareScreen/index.js
index 02ee0f0..9219774 100644
--- a/src/containers/SoftwareScreen/index.js
+++ b/src/containers/SoftwareScreen/index.js
@@ -3,6 +3,7 @@ import Navbar from '../../components/navbar'
 import Footer from '../../components/footer'
 import { Link } from 'react-router-dom';
 import { images } from '../../assets';
+import Button from '../../components/Button';
 
 
 const SoftwareScreen = () => {
@@ -16,18 +17,19 @@ const SoftwareScreen = () => {
           <div className='d-flex flex-column align-items-center'>
             <h1 className='align-self-center col-8 text-success'>Build your Career</h1>
             <p className='col-8'>
-              At Momi Foundation, we are running different software engineer classes, 
+              At Momi Foundation, we are running different software engineer classes,
               events, online mentoring and support in career progression and interview process.
-              We will help you build your technical skills, software skills and interact with 
+              We will help you build your technical skills, software skills and interact with
               world class software engineer.
             </p>
             <Link className='col-8' to='/register-software'>
-              <button 
+              <Button
                 type='button'
-                className='btn btn-success col-4'
+                btnType="success"
+                className='col-4'
               >
                 Register Now
-              </button>
+              </Button>
             </Link>
           </div>
         </div>
@@ -98,7 +100,7 @@ const SoftwareScreen = () => {
                 <li>Learn React</li>
                 <li>Backend Development with Flask</li>
                 <li>Backend Development with NodeJS</li>
-                <button className="btn btn-success col-md-6 mt-4">Check Path</button>
+                <Button btnType="success" className="col-md-6 mt-4">Check Path</Button>
               </div>
             </div>
           </div>
@@ -119,7 +121,7 @@ const SoftwareScreen = () => {
                 <li>Learn React</li>
                 <li>Backend Development with Flask</li>
                 <li>Backend Development with NodeJS</li>
-                <button className="btn btn-success col-md-6 mt-4">Check Path</button>
+                <Button btnType="success" className="col-md-6 mt-4">Check Path</Button>
               </div>
             </div>
           </div>
@@ -140,7 +142,7 @@ const SoftwareScreen = () => {
                 <li>Learn React</li>
                 <li>Backend Development with Flask</li>
                 <li>Backend Development with NodeJS</li>
-                <button className="btn btn-success col-md-6 mt-4">Check Path</button>
+                <Button btnType="success" className="col-md-6 mt-4">Check Path</Button>
               </div>
             </div>
           </div>
@@ -157,7 +159,7 @@ const SoftwareScreen = () => {
                 <li>Strategic Alignment</li>
                 <li>Stakeholder Management</li>
                 <li>resource Management</li>
-                <button className="btn btn-success col-md-6 mt-4">Check Path</button>
+                <Button btnType="success" className="col-md-6 mt-4">Check Path</Button>
               </div>
             </div>
           </div>
@@ -174,7 +176,7 @@ const SoftwareScreen = () => {
                 <li>Strategic Alignment</li>
                 <li>Stakeholder Management</li>
                 <li>resource Management</li>
-                <button className="btn btn-success col-md-6 mt-4">Check Path</button>
+                <Button btnType="success" className="col-md-6 mt-4">Check Path</Button>
               </div>
             </div>
           </div>
@@ -191,7 +193,7 @@ const SoftwareScreen = () => {
                 <li>Strategic Alignment</li>
                 <li>Stakeholder Management</li>
                 <li>resource Management</li>
-                <button className="btn btn-success col-md-6 mt-4">Check Path</button>
+                <Button btnType="success" className="col-md-6 mt-4">Check Path</Button>
               </div>
             </div>
           </div>
@@ -207,8 +209,8 @@ const SoftwareScreen = () => {
               <strong className="d-inline-block mb-2 text-success">Ezrqn kemboi, Kenya</strong>
               <p>
                 Momi Foundation has helped me understand software development. I am confident right Now
-                that I am ready and prepared to apply for Junior to mid-level jobs. Also, apart 
-                from learning coding, I was able to learn leadership skills, project management, 
+                that I am ready and prepared to apply for Junior to mid-level jobs. Also, apart
+                from learning coding, I was able to learn leadership skills, project management,
                 soft skills and general team building.
               </p>
               <p className="mb-1 text-muted">February 2023</p>
@@ -219,8 +221,8 @@ const SoftwareScreen = () => {
               <strong className="d-inline-block mb-2 text-success">David Mwangi, Kenya</strong>
               <p>
                 Momi Foundation has helped me understand software development. I am confident right Now
-                that I am ready and prepared to apply for Junior to mid-level jobs. Also, apart 
-                from learning coding, I was able to learn leadership skills, project management, 
+                that I am ready and prepared to apply for Junior to mid-level jobs. Also, apart
+                from learning coding, I was able to learn leadership skills, project management,
                 soft skills and general team building.
               </p>
               <p className="mb-1 text-muted">February 2023</p>
@@ -231,8 +233,8 @@ const SoftwareScreen = () => {
               <strong className="d-inline-block mb-2 text-success">Mark Too, Kenya</strong>
               <p>
                 Momi Foundation has helped me understand software development. I am confident right Now
-                that I am ready and prepared to apply for Junior to mid-level jobs. Also, apart 
-                from learning coding, I was able to learn leadership skills, project management, 
+                that I am ready and prepared to apply for Junior to mid-level jobs. Also, apart
+                from learning coding, I was able to learn leadership skills, project management,
                 soft skills and general team building.
               </p>
               <p className="mb-1 text-muted">February 2023</p>
@@ -248,12 +250,13 @@ const SoftwareScreen = () => {
           We are here to help you progress in your career
         </p>
         <Link className='d-flex justify-content-center col-12' to='/register-software'>
-          <button 
+          <Button
             type='button'
-            className='btn btn-success col-2'
+            btnType="success"
+            className='col-2'
           >
             Register Now
-          </button>
+          </Button>
         </Link>
       </div>
       <Footer />
diff --git a/src/containers/Sports/components/upcoming-events.js b/src/containers/Sports/components/upcoming-events.js
index b00edf1..dd57b6e 100644
--- a/src/containers/Sports/components/upcoming-events.js
+++ b/src/containers/Sports/components/upcoming-events.js
@@ -1,5 +1,6 @@
 import React from 'react'
 import { images } from '../../../assets';
+import Button from '../../../components/Button';
 
 
 const UpcomingEvents = () => {
@@ -13,7 +14,7 @@ const UpcomingEvents = () => {
             <h3 className="mb-0">Football Tournament</h3>
             <div className="mb-1 text-muted">April 2023</div>
             <p className="card-text mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
-            <button className="btn btn-success col-md-6">Check More Details</button>
+            <Button btnType="success" >Check More Details</Button>
           </div>
           <div className="col-auto d-none d-lg-block">
             <img src={images.AJP_0004} alt='footbal' width="200" height="250" />
@@ -27,10 +28,10 @@ const UpcomingEvents = () => {
             <h3 className="mb-0">Post title</h3>
             <div className="mb-1 text-muted">Nov 11</div>
             <p className="mb-auto">
-              This is a wider card with supporting text below as a natural 
+              This is a wider card with supporting text below as a natural
               lead-in to additional content.
             </p>
-            <button className="btn btn-success col-md-6">Check More Details</button>
+            <Button btnType="success" >Check More Details</Button>
           </div>
           <div className="col-auto d-none d-lg-block">
             <div className="bd-placeholder-img" width="200" height="250">
@@ -46,7 +47,7 @@ const UpcomingEvents = () => {
             <h3 className="mb-0">Football Tournament</h3>
             <div className="mb-1 text-muted">April 2023</div>
             <p className="card-text mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
-            <button className="btn btn-success col-md-6">Check More Details</button>
+            <Button btnType="success" >Check More Details</Button>
           </div>
           <div className="col-auto d-none d-lg-block">
             <img src={images.AJP_0178} alt='footbal' width="200" height="250" />
@@ -60,7 +61,7 @@ const UpcomingEvents = () => {
             <h3 className="mb-0">Football Tournament</h3>
             <div className="mb-1 text-muted">April 2023</div>
             <p className="card-text mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
-            <button className="btn btn-success col-md-6">Check More Details</button>
+            <Button btnType="success" >Check More Details</Button>
           </div>
           <div className="col-auto d-none d-lg-block">
             <img src={images.AJP_0285} alt='footbal' width="200" height="250" />
diff --git a/src/containers/Sports/index.js b/src/containers/Sports/index.js
index 75c795d..120cb71 100644
--- a/src/containers/Sports/index.js
+++ b/src/containers/Sports/index.js
@@ -3,6 +3,7 @@ import Navbar from '../../components/navbar';
 import Footer from '../../components/footer';
 import { UpcomingEvents, StandingTable } from './components'
 import { Link } from 'react-router-dom';
+import Button from '../../components/Button';
 
 const groups = ['Group A', 'Group B', 'Group C', 'Group D']
 
@@ -15,10 +16,10 @@ const SportsScreen = () => {
           <div className="col-md-6 px-0">
             <h1 className="display-6 fst-italic">Momi Foundation Football League - April 2023</h1>
             <p className="lead my-3">
-              Multiple lines of text that form the lede, informing new readers quickly and efficiently 
+              Multiple lines of text that form the lede, informing new readers quickly and efficiently
               about whats most interesting in this pos contents.
             </p>
-            <button className='btn btn-light text-success'>Check Now</button>
+            <Button className='btn btn-light text-success'>Check Now</Button>
           </div>
         </div>
         <UpcomingEvents />