42 lines
1.5 KiB
Text
42 lines
1.5 KiB
Text
import React from 'react';
|
|
import cn from 'classnames';
|
|
import { Icon } from 'UI';
|
|
import styles from './integrationItem.css';
|
|
|
|
const onDocLinkClick = (e, link) => {
|
|
e.stopPropagation();
|
|
window.open(link, '_blank');
|
|
}
|
|
|
|
const IntegrationItem = ({
|
|
deleteHandler = null, icon, url = null, title = '', description = '', onClick = null, dockLink = '', integrated = false
|
|
}) => {
|
|
return (
|
|
<div className={ styles.wrapper } onClick={ e => onClick(e, url) }>
|
|
<Icon name={ icon } size="50" />
|
|
<h4 className="text-lg my-4">{ title }</h4>
|
|
<p className={ styles.description }>{ description }</p>
|
|
<div className={ styles.externalIcon } data-hidden={ !url }><Icon name="external-link-alt" size="18" /></div>
|
|
<div className={ styles.footer }>
|
|
{deleteHandler && (
|
|
<div className={ cn(styles.docsLink, 'color-red') } onClick={ deleteHandler }>
|
|
<Icon name="trash" size="16" color="red" marginRight="5" />
|
|
{ 'Remove' }
|
|
</div>
|
|
)}
|
|
{ dockLink && (
|
|
<div className={ cn(styles.docsLink, !dockLink ? styles.hidden : '') } onClick={ (e) => onDocLinkClick(e, dockLink) }>
|
|
<Icon name="book" size="16" color="gray-medium" marginRight="5" />
|
|
{ 'Documentation' }
|
|
</div>
|
|
)}
|
|
<div className={ styles.integratedCheck } data-hidden={ !integrated }>
|
|
<Icon name="check-circle" size="16" color="teal" marginRight="5" />
|
|
{ 'Integrated' }
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
};
|
|
|
|
export default IntegrationItem;
|