mancala/src/components/Button.tsx

39 lines
838 B
TypeScript

import * as React from "react";
import { FunctionComponent } from "react";
import { Context } from "../context/context";
import { getColorByBrightness } from "../util/ColorUtil";
const Button: FunctionComponent<{
context: Context;
text: String;
onClick: () => void;
color: string;
}> = ({ context, text, color, onClick }) => {
const textColor = getColorByBrightness(
color,
context.themeManager.theme.textColor,
context.themeManager.theme.textLightColor
);
return (
<button
onClick={onClick}
style={{
background: color,
color: textColor,
}}
>
<style jsx>{`
button {
margin: 5px;
padding: 10px;
border: none;
border-radius: 30px;
}
`}</style>
{text}
</button>
);
};
export default Button;