Skip to content

Instantly share code, notes, and snippets.

@dminuoso dminuoso/foo.js forked from anonymous/.js
Last active Oct 29, 2017

Embed
What would you like to do?
const toggleClass = (id, toggle) => id === toggle ? 'toggle active' : 'toggle inactive';
const Style = ({ activeFontColor, activeBackgroundColor, fontColor }) => (
<style jsx>
{`
.toggle {
width: 50%;
height: 50px;
border-radius: 100px;
line-height: 50px;
float: left;
}
.active{
color: ${activeFontColor};
background-color: ${activeBackgroundColor};
border-radius:100px;
}
.inactive{
cursor: pointer;
color: ${fontColor};
}
`}
</style>
);
const Button = ({ id,
value,
activeToggle,
activeBackgroundColor,
fontColor,
activeFontColor,
handleToggle }) =>
(
<div className={toggleClass(id, toggle)} onClick={() => handleToggle && handleToggle(id, value) }>
{value}
<Style {...{ activeFontColor, fontColor, activeBackgroundColor }} />
</div>
);
Button.defaultProps = {
backgroundColor: "white",
fontColor: "#4a4a4a",
activeBackgroundColor: "#ff5122",
activeFontColor: "white",
}
export default Button;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.