Buttons - Added Button component

src/components/css/Github.css

@@ -3,6 +3,10 @@
     color: #AA9AA0;
 }
 
+.Github .btn {
+    color: #AA9AA0;
+}
+
 .Github .dropdown-list {
     width: fit-content;
     background-color: #3F3F4A;

src/components/subcomponents/Buttons.js

@@ -1,7 +1,6 @@
 import React, { useState } from 'react';
-import { Link } from 'react-router-dom';
 import '../css/Buttons.css';
-import {ArrowUpShort, ArrowDownShort} from 'react-bootstrap-icons';
+import { ArrowUpShort, ArrowDownShort } from 'react-bootstrap-icons';
 
 /**
  * Buttons - set of button components that are reusable throughout the app.
@@ -14,7 +13,11 @@ export const ToggleButton = ({
         clickAction=()=>{}
     }) => {
     /**
-     * ToggleButton - A subcomponent for making lists of content, mostly to make a list of links.
+     * ToggleButton - A button component for making a toggle button
+     *   defVal: default value, true/false
+     *   icons: array of two jsx values that are displayed depending on value
+     *   text: text next to toggle button
+     *   clickAction: function that will run when clicked. value is passed to this function.
      */
 
     const [value, setValue] = useState(defVal);
@@ -23,6 +26,23 @@ export const ToggleButton = ({
         <div className="btn toggle" onClick={()=>{setValue(!value); clickAction(value);}} >
             <div className={value?'on':'off'}> {icons[0]} </div>
             <div className={value?'off':'on'}> {icons[1]} </div>
+            {text}
         </div>
     );    
 };
+
+export const Button = ({children, onClick=()=>{}, href=null, className=""}) => {
+    if (href === null) {
+        return (
+            <button onClick={onClick} className={'btn '+ className}>
+                {children}
+            </button>
+        );
+    } else {
+        return (
+            <a onClick={onClick} href={href} className={'btn '+className}>
+                {children}
+            </a>
+        );
+    }
+}

src/components/subcomponents/GithubRepos.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import { getRepos, getUser, getRepoLanguages, nextPage, setSortValue } from '../../actions';
-import { ToggleButton } from './Buttons';
+import { ToggleButton, Button } from './Buttons';
 
 class GithubRepos extends React.Component {
 
@@ -166,7 +166,7 @@ class GithubRepos extends React.Component {
             {render}
             
             {this.props.page < pages ?
-              <div className="btn mar-la mar-ra" onClick={()=>this.props.nextPage()}>Load More ({this.props.page}/{pages})</div>
+              <Button className="mar-la mar-ra" onClick={()=>this.props.nextPage()}>Load More ({this.props.page}/{pages})</Button>
               : ""
             }
           </div>