add button component

Author: alexlobera

README.md

@@ -80,7 +80,7 @@ The goal of this exercise is to understand what's state and how to reason about
 - [ ] 5. Break `<Books>` down into `<BookList>` and `<BookFilter>`
 
 ## 🏋️‍♀️ Bonus exercise
-- What do you think it would make sense to componentize next? Are there any parts on that view that you can reuse? Hint, replace the `<a>` with your `<Link>` component. Who are the children of the `Link` component? The `Link` component should receive a prop called `to` that becomes the href of the `<a href={to} ...`. Try to use the prop called `children` for the text displayed inside the anchor.
+- Abstract the `button` component that is inside the `Navbar` component and `Menu` component into a `Button` component. Do we know ahead of time who are the children of the `Button` component? Try to use the prop called `children` for the elements displayed inside the button.
 - Can we move the `isMenuOpen` state inside the menu? Does it conflict with the idea of "lifting the state up".
 - If you look at the [React Profiler](https://reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html) when you open and close the menu, is the whole app being rendered? If so, how can we avoid that and still lift the state up?
 

public/css/main.css

@@ -297,7 +297,6 @@ footer .footer-below {
   border: solid 2px white;
   background: transparent;
   transition: all 0.3s ease-in-out;
-  margin-top: 15px;
 }
 .btn-outline:hover,
 .btn-outline:focus,

src/components/Button.js

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const Button = (props) => (
+  <button onClick={props.onClick} className="btn btn-lg btn-outline">
+    {props.children}
+  </button>
+)
+
+export default Button

src/components/Footer.js

@@ -50,12 +50,13 @@ function Footer() {
               </ul>
             </div>
             <div className="footer-col col-md-4">
-              <h3>About ReactJS Academy</h3>
+              <h3>About React GraphQL Academy</h3>
               <p>
-                <a href="https://reactjs.academy/">ReactJS Academy</a>
+                <a href="https://reactjs.academy/">React GraphQL Academy</a>
+                {` `}
                 <span>
-                  ReactJS Academy is Europes longest running dedicated React,
-                  Redux, and GraphQL training.
+                  is Europes longest running dedicated React, Redux, and GraphQL
+                  training.
                 </span>
               </p>
             </div>
@@ -67,13 +68,7 @@ function Footer() {
           <div className="row">
             <div className="col-lg-12">
               <span>Copyright &copy;</span>{' '}
-              <a
-                href="https://leanjs.com/"
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                LeanJS
-              </a>
+              <a to="https://leanjs.com/">LeanJS</a>
             </div>
           </div>
         </div>

src/components/Header.js

@@ -1,12 +1,12 @@
 import React from 'react'
 
-const Header = props => (
+const Header = (props) => (
   <header>
     <div className="container">
       <div className="row">
         <div className="col-lg-12">
           <img
-            alt="Logo ReactJS Academy"
+            alt="Logo React GraphQL Academy"
             className="img-responsive logo-academy"
             src="/img/logo.png"
           />

src/components/Navigations/Menu.js

@@ -2,19 +2,16 @@ import React from 'react'
 
 import SideMenu from './Menus/SideMenu'
 import SideMenuItem from './Menus/SideMenuItem'
+import Button from '../Button'
 
-const Menu = props => (
+const Menu = (props) => (
   <SideMenu isOpen={props.isOpen} toggleMenu={props.toggleMenu}>
-    <h4>
-      Next Courses
-      <button
-        className="btn-link"
-        onClick={() => props.toggleMenu()}
-        style={{ cursor: 'pointer' }}
-      >
-        <i className="fa fa-close pull-right" />
-      </button>
-    </h4>
+    <div style={{ position: 'absolute', right: '10px' }}>
+      <Button onClick={() => props.toggleMenu()}>
+        <i className="fa fa-close" />
+      </Button>
+    </div>
+    <h4>Next Courses</h4>
     <SideMenuItem link="https://reactjs.academy/react-redux-graphql-bootcamp/">
       Bootcamp
     </SideMenuItem>

src/components/Navigations/Navbar.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import Button from '../Button'
 
 function Navbar(props) {
   return (
@@ -14,12 +15,9 @@ function Navbar(props) {
             <a href="#about">About us</a>
           </li>
           <li>
-            <button
-              onClick={props.toggleMenu}
-              className="btn btn-lg btn-outline"
-            >
+            <Button onClick={props.toggleMenu}>
               <i className="fa fa-graduation-cap" /> <span>Training</span>
-            </button>
+            </Button>
           </li>
         </ul>
       </div>