72 lines
1.9 KiB
JavaScript
72 lines
1.9 KiB
JavaScript
import React from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import './ChannelTile.scss';
|
|
|
|
import Linkify from 'linkifyjs/react';
|
|
import colorMXID from '../../../util/colorMXID';
|
|
|
|
import Text from '../../atoms/text/Text';
|
|
import Avatar from '../../atoms/avatar/Avatar';
|
|
|
|
function linkifyContent(content) {
|
|
return <Linkify options={{ target: { url: '_blank' } }}>{content}</Linkify>;
|
|
}
|
|
|
|
function ChannelTile({
|
|
avatarSrc, name, id,
|
|
inviterName, memberCount, desc, options,
|
|
}) {
|
|
return (
|
|
<div className="channel-tile">
|
|
<div className="channel-tile__avatar">
|
|
<Avatar
|
|
imageSrc={avatarSrc}
|
|
bgColor={colorMXID(id)}
|
|
text={name.slice(0, 1)}
|
|
/>
|
|
</div>
|
|
<div className="channel-tile__content">
|
|
<Text variant="s1">{name}</Text>
|
|
<Text variant="b3">
|
|
{
|
|
inviterName !== null
|
|
? `Invited by ${inviterName} to ${id}${memberCount === null ? '' : ` • ${memberCount} members`}`
|
|
: id + (memberCount === null ? '' : ` • ${memberCount} members`)
|
|
}
|
|
</Text>
|
|
{
|
|
desc !== null && (typeof desc === 'string')
|
|
? <Text className="channel-tile__content__desc" variant="b2">{linkifyContent(desc)}</Text>
|
|
: desc
|
|
}
|
|
</div>
|
|
{ options !== null && (
|
|
<div className="channel-tile__options">
|
|
{options}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
ChannelTile.defaultProps = {
|
|
avatarSrc: null,
|
|
inviterName: null,
|
|
options: null,
|
|
desc: null,
|
|
memberCount: null,
|
|
};
|
|
ChannelTile.propTypes = {
|
|
avatarSrc: PropTypes.string,
|
|
name: PropTypes.string.isRequired,
|
|
id: PropTypes.string.isRequired,
|
|
inviterName: PropTypes.string,
|
|
memberCount: PropTypes.oneOfType([
|
|
PropTypes.string,
|
|
PropTypes.number,
|
|
]),
|
|
desc: PropTypes.node,
|
|
options: PropTypes.node,
|
|
};
|
|
|
|
export default ChannelTile;
|