2021-02-23 12:45:42 -08:00
|
|
|
import { Avatar, Divider, Image, Row, Space, Tag, Tooltip, Typography } from 'antd';
|
2021-02-03 11:49:51 -08:00
|
|
|
import React from 'react';
|
|
|
|
import { Link } from 'react-router-dom';
|
2021-03-23 15:18:32 -07:00
|
|
|
import styled from 'styled-components';
|
2021-03-07 11:26:47 -08:00
|
|
|
import { EntityType, GlobalTags } from '../../types.generated';
|
2021-02-23 12:45:42 -08:00
|
|
|
import defaultAvatar from '../../images/default_avatar.png';
|
|
|
|
import { useEntityRegistry } from '../useEntityRegistry';
|
2021-03-18 11:52:14 -07:00
|
|
|
import TagGroup from '../shared/tags/TagGroup';
|
2021-02-03 11:49:51 -08:00
|
|
|
|
2021-02-23 12:45:42 -08:00
|
|
|
interface Props {
|
|
|
|
name: string;
|
|
|
|
logoUrl?: string;
|
2021-02-03 11:49:51 -08:00
|
|
|
url: string;
|
2021-02-23 12:45:42 -08:00
|
|
|
description: string;
|
2021-03-07 11:26:47 -08:00
|
|
|
type?: string;
|
|
|
|
platform?: string;
|
2021-02-23 12:45:42 -08:00
|
|
|
qualifier?: string | null;
|
2021-03-07 11:26:47 -08:00
|
|
|
tags?: GlobalTags;
|
|
|
|
owners?: Array<{ urn: string; name?: string; photoUrl?: string }>;
|
2021-03-23 15:18:32 -07:00
|
|
|
snippet?: React.ReactNode;
|
2021-02-03 11:49:51 -08:00
|
|
|
}
|
|
|
|
|
2021-03-23 15:18:32 -07:00
|
|
|
const DescriptionParagraph = styled(Typography.Paragraph)`
|
|
|
|
&&& {
|
|
|
|
margin-bottom: 0px;
|
|
|
|
padding-left: 8px;
|
|
|
|
}
|
|
|
|
`;
|
|
|
|
|
2021-02-23 12:45:42 -08:00
|
|
|
const styles = {
|
2021-03-23 15:18:32 -07:00
|
|
|
row: { width: '100%', marginBottom: '0px' },
|
2021-02-23 12:45:42 -08:00
|
|
|
leftColumn: { maxWidth: '75%' },
|
|
|
|
rightColumn: { maxWidth: '25%' },
|
|
|
|
logoImage: { width: '48px' },
|
2021-03-09 23:14:52 -08:00
|
|
|
name: { fontSize: '18px' },
|
2021-02-23 12:45:42 -08:00
|
|
|
typeName: { color: '#585858' },
|
|
|
|
platformName: { color: '#585858' },
|
|
|
|
ownedBy: { color: '#585858' },
|
|
|
|
};
|
|
|
|
|
|
|
|
export default function DefaultPreviewCard({
|
|
|
|
name,
|
|
|
|
logoUrl,
|
|
|
|
url,
|
|
|
|
description,
|
|
|
|
type,
|
|
|
|
platform,
|
|
|
|
qualifier,
|
|
|
|
tags,
|
|
|
|
owners,
|
2021-03-23 15:18:32 -07:00
|
|
|
snippet,
|
2021-02-23 12:45:42 -08:00
|
|
|
}: Props) {
|
|
|
|
const entityRegistry = useEntityRegistry();
|
2021-02-03 11:49:51 -08:00
|
|
|
return (
|
2021-02-23 12:45:42 -08:00
|
|
|
<Row style={styles.row} justify="space-between">
|
|
|
|
<Space direction="vertical" align="start" size={28} style={styles.leftColumn}>
|
|
|
|
<Link to={url}>
|
2021-03-13 07:55:29 -08:00
|
|
|
<Space direction="horizontal" size={20} align="center">
|
2021-02-23 12:45:42 -08:00
|
|
|
{logoUrl && <Image style={styles.logoImage} src={logoUrl} preview />}
|
|
|
|
<Space direction="vertical" size={8}>
|
|
|
|
<Typography.Text strong style={styles.name}>
|
|
|
|
{name}
|
|
|
|
</Typography.Text>
|
|
|
|
<Space split={<Divider type="vertical" />} size={16}>
|
2021-03-09 23:14:52 -08:00
|
|
|
<Typography.Text>{type}</Typography.Text>
|
|
|
|
<Typography.Text strong>{platform}</Typography.Text>
|
2021-02-23 12:45:42 -08:00
|
|
|
<Tag>{qualifier}</Tag>
|
|
|
|
</Space>
|
|
|
|
</Space>
|
|
|
|
</Space>
|
2021-02-09 14:30:23 -08:00
|
|
|
</Link>
|
2021-03-23 15:18:32 -07:00
|
|
|
<div>
|
|
|
|
{description.length === 0 ? (
|
|
|
|
<DescriptionParagraph type="secondary">No description</DescriptionParagraph>
|
|
|
|
) : (
|
|
|
|
<DescriptionParagraph>{description}</DescriptionParagraph>
|
|
|
|
)}
|
|
|
|
{snippet}
|
|
|
|
</div>
|
2021-02-23 12:45:42 -08:00
|
|
|
</Space>
|
|
|
|
<Space direction="vertical" align="end" size={36} style={styles.rightColumn}>
|
|
|
|
<Space direction="vertical" size={12}>
|
2021-03-09 23:14:52 -08:00
|
|
|
<Typography.Text strong>Owned By</Typography.Text>
|
2021-02-23 12:45:42 -08:00
|
|
|
<Avatar.Group maxCount={4}>
|
2021-03-07 11:26:47 -08:00
|
|
|
{owners?.map((owner) => (
|
|
|
|
<Tooltip title={owner.name} key={owner.urn}>
|
2021-02-23 12:45:42 -08:00
|
|
|
<Link to={`/${entityRegistry.getPathName(EntityType.CorpUser)}/${owner.urn}`}>
|
|
|
|
<Avatar src={owner.photoUrl || defaultAvatar} />
|
|
|
|
</Link>
|
|
|
|
</Tooltip>
|
|
|
|
))}
|
|
|
|
</Avatar.Group>
|
|
|
|
</Space>
|
2021-03-19 08:05:52 -07:00
|
|
|
<TagGroup editableTags={tags} maxShow={3} />
|
2021-02-23 12:45:42 -08:00
|
|
|
</Space>
|
|
|
|
</Row>
|
2021-02-03 11:49:51 -08:00
|
|
|
);
|
|
|
|
}
|