mirror of
https://github.com/array-in-a-matrix/xinny.git
synced 2024-05-19 12:50:17 -04:00
56 lines
1.6 KiB
JavaScript
56 lines
1.6 KiB
JavaScript
import React from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import './RoomTile.scss';
|
|
|
|
import colorMXID from '../../../util/colorMXID';
|
|
|
|
import Text from '../../atoms/text/Text';
|
|
import Avatar from '../../atoms/avatar/Avatar';
|
|
|
|
function RoomTile({ avatarSrc, name, id, inviterName, memberCount, desc, options }) {
|
|
return (
|
|
<div className="room-tile">
|
|
<div className="room-tile__avatar">
|
|
<Avatar imageSrc={avatarSrc} bgColor={colorMXID(id)} text={name} />
|
|
</div>
|
|
<div className="room-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="room-tile__content__desc" variant="b2">
|
|
{desc}
|
|
</Text>
|
|
) : (
|
|
desc
|
|
)}
|
|
</div>
|
|
{options !== null && <div className="room-tile__options">{options}</div>}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
RoomTile.defaultProps = {
|
|
avatarSrc: null,
|
|
inviterName: null,
|
|
options: null,
|
|
desc: null,
|
|
memberCount: null,
|
|
};
|
|
RoomTile.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 RoomTile;
|