72 lines
1.9 KiB
React
72 lines
1.9 KiB
React
import { Box, Typography, useTheme } from '@mui/material';
|
|
import Button from '../Button';
|
|
import PropTypes from 'prop-types';
|
|
|
|
/**
|
|
* Integrations component
|
|
* @param {Object} props - Props for the IntegrationsComponent.
|
|
* @param {string} props.url - The URL for the integration image.
|
|
* @param {string} props.header - The header for the integration.
|
|
* @param {string} props.info - Information about the integration.
|
|
* @param {Function} props.onClick - The onClick handler for the integration button.
|
|
* @returns {JSX.Element} The JSX representation of the IntegrationsComponent.
|
|
*/
|
|
const IntegrationsComponent = ({ url, header, info, onClick }) => {
|
|
const theme = useTheme();
|
|
|
|
return (
|
|
<Box
|
|
display="flex"
|
|
alignItems="center"
|
|
p={theme.spacing(2)}
|
|
border={1}
|
|
borderColor={theme.palette.divider}
|
|
borderRadius={theme.shape.borderRadius}
|
|
>
|
|
<Box
|
|
component="img"
|
|
src={url}
|
|
alt="Integration"
|
|
width={100}
|
|
height={100}
|
|
/>
|
|
|
|
<Box
|
|
flex={1}
|
|
mx={theme.spacing(2)}
|
|
display="flex"
|
|
flexDirection="column"
|
|
alignItems="flex-start"
|
|
>
|
|
<Typography variant="h6" component="div" style={{ fontSize: '16px' }}>
|
|
{header}
|
|
</Typography>
|
|
<Typography
|
|
variant="body1"
|
|
component="div"
|
|
sx={{
|
|
maxWidth: '300px',
|
|
wordWrap: 'break-word',
|
|
textAlign: 'left'
|
|
}}
|
|
style={{ fontSize: '13px' }}
|
|
>
|
|
{info}
|
|
</Typography>
|
|
</Box>
|
|
|
|
<Button label="Click Me" level="primary" onClick={onClick} />
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
// PropTypes for IntegrationsComponent
|
|
IntegrationsComponent.propTypes = {
|
|
url: PropTypes.string.isRequired,
|
|
header: PropTypes.string.isRequired,
|
|
info: PropTypes.string.isRequired,
|
|
onClick: PropTypes.func.isRequired
|
|
};
|
|
|
|
export default IntegrationsComponent;
|