You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
67 lines
1.5 KiB
67 lines
1.5 KiB
import React from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import Button from '../../ui/button';
|
|
import Box from '../../ui/box';
|
|
import Typography from '../../ui/typography';
|
|
import { COLORS, FRACTIONS } from '../../../helpers/constants/design-system';
|
|
|
|
const OnRampItem = ({
|
|
logo,
|
|
title,
|
|
text,
|
|
buttonLabel,
|
|
onButtonClick,
|
|
hide = false,
|
|
}) => {
|
|
if (hide) {
|
|
return null;
|
|
}
|
|
return (
|
|
<Box paddingRight={6} paddingLeft={6}>
|
|
<Box
|
|
paddingTop={6}
|
|
paddingBottom={6}
|
|
style={{
|
|
borderBottomSize: '1px',
|
|
borderBottomColor: COLORS.BORDER_MUTED,
|
|
}}
|
|
>
|
|
<Box width={FRACTIONS.HALF}>{logo}</Box>
|
|
<Typography
|
|
variant="h6"
|
|
fontWeight="bold"
|
|
boxProps={{
|
|
paddingTop: 2,
|
|
paddingBottom: 2,
|
|
}}
|
|
>
|
|
{title}
|
|
</Typography>
|
|
<Typography
|
|
boxProps={{
|
|
paddingTop: 2,
|
|
paddingBottom: 2,
|
|
}}
|
|
>
|
|
{text}
|
|
</Typography>
|
|
<Box marginTop={4}>
|
|
<Button type="secondary" onClick={onButtonClick}>
|
|
{buttonLabel}
|
|
</Button>
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
OnRampItem.propTypes = {
|
|
logo: PropTypes.node.isRequired,
|
|
title: PropTypes.string.isRequired,
|
|
text: PropTypes.string.isRequired,
|
|
buttonLabel: PropTypes.string.isRequired,
|
|
onButtonClick: PropTypes.func.isRequired,
|
|
hide: PropTypes.bool,
|
|
};
|
|
|
|
export default OnRampItem;
|
|
|