Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 | /* eslint-disable jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */
import React from 'react';
import { css } from '@emotion/react';
import { EndScreen } from '@uniquegood/realworld-web-interface/lib/models/game/Screen/End';
interface EndScreenPageTextButtonProps {
button: EndScreen['button'];
text?: string;
className?: string;
onClick?: () => unknown;
children?: React.ReactNode;
}
export default function EndScreenPageButton({
button,
text,
className,
onClick,
children
}: EndScreenPageTextButtonProps) {
const buttonWrapStyle = React.useMemo(() => {
let cssText = `
color: ${button.style.color};
`;
if (button.type === 'A') {
cssText += `
background-color: ${button.style.backgroundColor};
`;
}
if (button.type === 'B') {
cssText += `
background-color: ${button.style.backgroundColor};
border-radius: 6px;
`;
}
if (button.type === 'C') {
cssText += `
background-color: ${button.style.backgroundColor};
border-radius: 26px;
`;
}
return css(cssText);
}, [button.style, button.type]);
return (
<div css={[buttonWrap, buttonWrapStyle]} onClick={onClick} className={className}>
<div>{text}</div>
{children}
</div>
);
}
const buttonWrap = css`
user-select: none;
height: 52px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
font-weight: 600;
font-size: 17px;
cursor: pointer;
padding: 16px;
`;
|