38 lines
848 B
JavaScript
38 lines
848 B
JavaScript
/** @jsxImportSource theme-ui */
|
|
|
|
const HeaderButton = ({ url, image, text, alt }) => (
|
|
<a
|
|
href={url}
|
|
className="headerButton"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
sx={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
backgroundColor: '#fff',
|
|
height: ['36px', '50px', '50px'],
|
|
borderRadius: '4px',
|
|
px: ['10px', '18px', '18px'],
|
|
boxShadow: 'rgb(0 0 0 / 10%) 0px 4px 12px',
|
|
fontSize: ['13px', '15px', '15px'],
|
|
textDecoration: 'none',
|
|
color: '#000',
|
|
':hover': {
|
|
backgroundColor: 'white90',
|
|
},
|
|
}}
|
|
>
|
|
<img
|
|
src={image}
|
|
alt={alt}
|
|
sx={{
|
|
marginRight: ['5px', '8px', '8px'],
|
|
height: ['22px', '28px', '28px'],
|
|
width: ['22px', '28px', '28px'],
|
|
}}
|
|
/>
|
|
{text}
|
|
</a>
|
|
);
|
|
|
|
export default HeaderButton;
|