generated from lucien/actix-react-template
36 lines
1.2 KiB
TypeScript
36 lines
1.2 KiB
TypeScript
import { ReactNode } from 'react';
|
|
|
|
interface ButtonProps {
|
|
color: 'primary' | 'secondary';
|
|
children: ReactNode;
|
|
url?: string;
|
|
}
|
|
|
|
export default function Button({ color, children, url }: ButtonProps) {
|
|
return (
|
|
<a style={{
|
|
backgroundColor: color === 'primary' ? 'var(--color-yellow)' : 'var(--color-darkblue)',
|
|
borderRadius: '8px',
|
|
borderWidth: '0',
|
|
color: color === 'primary' ? 'var(--color-black)' : 'var(--color-white)',
|
|
cursor: 'pointer',
|
|
display: 'inline-block',
|
|
fontFamily: '"Haas Grot Text R Web", "Helvetica Neue", Helvetica, Arial, sans-serif',
|
|
fontSize: '20px',
|
|
fontWeight: '500',
|
|
lineHeight: '20px',
|
|
listStyle: 'none',
|
|
margin: '0',
|
|
padding: '10px 12px',
|
|
textAlign: 'center',
|
|
transition: 'all 200ms',
|
|
verticalAlign: 'baseline',
|
|
whiteSpace: 'nowrap',
|
|
userSelect: 'none',
|
|
WebkitUserSelect: 'none',
|
|
touchAction: 'manipulation',
|
|
textDecoration: 'none',
|
|
}} href={url} className="ni-button" role="button">{children}</a>
|
|
)
|
|
}
|
|
|