upstream-rocketchat/apps/meteor/client/components/UserCard/UserCard.tsx

import { css } from '@rocket.chat/css-in-js';
import { Box, Button, IconButton } from '@rocket.chat/fuselage';
import { UserAvatar } from '@rocket.chat/ui-avatar';
import { useEmbeddedLayout } from '@rocket.chat/ui-client';
import type { ReactNode, ComponentProps } from 'react';
import { useTranslation } from 'react-i18next';

import MarkdownText from '../MarkdownText';
import * as Status from '../UserStatus';
import UserCardActions from './UserCardActions';
import UserCardDialog from './UserCardDialog';
import UserCardInfo from './UserCardInfo';
import UserCardRoles from './UserCardRoles';
import UserCardUsername from './UserCardUsername';

const clampStyle = css`
	display: -webkit-box;
	overflow: hidden;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	word-break: break-word;
`;

export type UserCardProps = {
	user?: {
		nickname?: string;
		name?: string;
		username?: string;
		etag?: string;
		customStatus?: ReactNode;
		roles?: ReactNode;
		bio?: ReactNode;
		status?: ReactNode;
		localTime?: ReactNode;
	};
	actions?: ReactNode;
	onOpenUserInfo?: () => void;
	onClose?: () => void;
} & ComponentProps<typeof UserCardDialog>;

const UserCard = ({
	user: { name, username, etag, customStatus, roles, bio, status = <Status.Offline />, localTime, nickname } = {},
	actions,
	onOpenUserInfo,
	onClose,
	...props
}: UserCardProps) => {
	const { t } = useTranslation();
	const isLayoutEmbedded = useEmbeddedLayout();

	return (
		<UserCardDialog aria-label={t('User_card')} {...props}>
			<div>
				{username && <UserAvatar username={username} etag={etag} size='x124' />}
				<Box flexGrow={0} display='flex' marginBlockStart={12} alignItems='center' justifyContent='center'>
					<UserCardActions aria-label={t('User_card_actions')}>{actions}</UserCardActions>
				</Box>
			</div>
			<Box display='flex' flexDirection='column' flexGrow={1} flexShrink={1} marginInlineStart={16} width='1px'>
				<Box marginBlockEnd={4} withTruncatedText display='flex' alignItems='center'>
					<UserCardUsername status={status} name={name} />
					{nickname && (
						<Box
							flexGrow={1}
							flexShrink={1}
							flexBasis={0}
							title={nickname}
							color='hint'
							marginInlineStart={4}
							fontScale='p2'
							withTruncatedText
						>
							({nickname})
						</Box>
					)}
				</Box>
				{customStatus && (
					<UserCardInfo marginBlockEnd={16}>
						{typeof customStatus === 'string' ? (
							<MarkdownText withTruncatedText variant='inlineWithoutBreaks' content={customStatus} parseEmoji={true} />
						) : (
							customStatus
						)}
					</UserCardInfo>
				)}
				<UserCardRoles>{roles}</UserCardRoles>
				<UserCardInfo>{localTime}</UserCardInfo>
				{bio && (
					<UserCardInfo withTruncatedText={false} className={clampStyle} height='x60'>
						{typeof bio === 'string' ? <MarkdownText variant='inline' content={bio} /> : bio}
					</UserCardInfo>
				)}
				{onOpenUserInfo && !isLayoutEmbedded && (
					<div>
						<Button small onClick={onOpenUserInfo}>
							{t('See_full_profile')}
						</Button>
					</div>
				)}
			</Box>
			{onClose && <IconButton marginInlineStart={16} small aria-label={t('Close')} icon='cross' onClick={onClose} />}
		</UserCardDialog>
	);
};

export default UserCard;