diff --git a/src/components/css/Github.css b/src/components/css/Github.css index e78f104..37d2c2c 100644 --- a/src/components/css/Github.css +++ b/src/components/css/Github.css @@ -3,6 +3,10 @@ color: #AA9AA0; } +.Github .btn { + color: #AA9AA0; +} + .Github .dropdown-list { width: fit-content; background-color: #3F3F4A; diff --git a/src/components/subcomponents/Buttons.js b/src/components/subcomponents/Buttons.js index e404457..c081d7c 100644 --- a/src/components/subcomponents/Buttons.js +++ b/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 = ({
{setValue(!value); clickAction(value);}} >
{icons[0]}
{icons[1]}
+ {text}
); -}; \ No newline at end of file +}; + +export const Button = ({children, onClick=()=>{}, href=null, className=""}) => { + if (href === null) { + return ( + + ); + } else { + return ( + + {children} + + ); + } +} \ No newline at end of file diff --git a/src/components/subcomponents/GithubRepos.js b/src/components/subcomponents/GithubRepos.js index d5490fb..3b032f3 100644 --- a/src/components/subcomponents/GithubRepos.js +++ b/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 ? -
this.props.nextPage()}>Load More ({this.props.page}/{pages})
+ : "" }