generated from lucien/actix-react-template
34 lines
1.1 KiB
TypeScript
34 lines
1.1 KiB
TypeScript
interface ButtonLinkProps {
|
|
url: string;
|
|
color: 'primary' | 'secondary';
|
|
text: string;
|
|
}
|
|
|
|
export default function Button({ url, color, text }: ButtonLinkProps) {
|
|
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: '14px',
|
|
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">{text}</a>
|
|
)
|
|
}
|
|
|