115 lines
3.9 KiB
TypeScript
115 lines
3.9 KiB
TypeScript
import React from 'react';
|
|
import { FormattedMessage, useIntl } from 'react-intl';
|
|
import { Link } from 'react-router-dom';
|
|
|
|
import Avatar from 'soapbox/components/avatar';
|
|
import StillImage from 'soapbox/components/still-image';
|
|
import { HStack, Stack, Text } from 'soapbox/components/ui';
|
|
import VerificationBadge from 'soapbox/components/verification-badge';
|
|
import { useAppSelector } from 'soapbox/hooks';
|
|
import { makeGetAccount } from 'soapbox/selectors';
|
|
import { getAcct } from 'soapbox/utils/accounts';
|
|
import { shortNumberFormat } from 'soapbox/utils/numbers';
|
|
import { displayFqn } from 'soapbox/utils/state';
|
|
|
|
const getAccount = makeGetAccount();
|
|
|
|
interface IUserPanel {
|
|
accountId: string,
|
|
action?: JSX.Element,
|
|
badges?: JSX.Element[],
|
|
domain?: string,
|
|
}
|
|
|
|
const UserPanel: React.FC<IUserPanel> = ({ accountId, action, badges, domain }) => {
|
|
const intl = useIntl();
|
|
const account = useAppSelector((state) => getAccount(state, accountId));
|
|
const fqn = useAppSelector((state) => displayFqn(state));
|
|
|
|
if (!account) return null;
|
|
const displayNameHtml = { __html: account.get('display_name_html') };
|
|
const acct = !account.get('acct').includes('@') && domain ? `${account.get('acct')}@${domain}` : account.get('acct');
|
|
const header = account.get('header');
|
|
const verified = account.get('verified');
|
|
|
|
return (
|
|
<div className='relative'>
|
|
<Stack space={2}>
|
|
<Stack>
|
|
<div className='-mt-4 -mx-4 h-24 bg-gray-200 relative overflow-hidden'>
|
|
{header && (
|
|
<StillImage src={account.header} />
|
|
)}
|
|
</div>
|
|
|
|
<HStack justifyContent='between'>
|
|
<Link
|
|
to={`/@${account.get('acct')}`}
|
|
title={acct}
|
|
className='-mt-12 block'
|
|
>
|
|
<Avatar
|
|
account={account}
|
|
className='h-20 w-20 bg-gray-50 ring-2 ring-white'
|
|
/>
|
|
</Link>
|
|
|
|
{action && (
|
|
<div className='mt-2'>{action}</div>
|
|
)}
|
|
</HStack>
|
|
</Stack>
|
|
|
|
<Stack>
|
|
<Link to={`/@${account.get('acct')}`}>
|
|
<HStack space={1} alignItems='center'>
|
|
<Text size='lg' weight='bold' dangerouslySetInnerHTML={displayNameHtml} />
|
|
|
|
{verified && <VerificationBadge />}
|
|
|
|
{badges && badges.length > 0 && (
|
|
<HStack space={1} alignItems='center'>
|
|
{badges}
|
|
</HStack>
|
|
)}
|
|
</HStack>
|
|
</Link>
|
|
|
|
<Text size='sm' theme='muted'>
|
|
@{getAcct(account, fqn)}
|
|
</Text>
|
|
</Stack>
|
|
|
|
<HStack alignItems='center' space={3}>
|
|
{account.get('followers_count') >= 0 && (
|
|
<Link to={`/@${account.get('acct')}/followers`} title={intl.formatNumber(account.get('followers_count'))}>
|
|
<HStack alignItems='center' space={1}>
|
|
<Text theme='primary' weight='bold' size='sm'>
|
|
{shortNumberFormat(account.get('followers_count'))}
|
|
</Text>
|
|
<Text weight='bold' size='sm'>
|
|
<FormattedMessage id='account.followers' defaultMessage='Followers' />
|
|
</Text>
|
|
</HStack>
|
|
</Link>
|
|
)}
|
|
|
|
{account.get('following_count') >= 0 && (
|
|
<Link to={`/@${account.get('acct')}/following`} title={intl.formatNumber(account.get('following_count'))}>
|
|
<HStack alignItems='center' space={1}>
|
|
<Text theme='primary' weight='bold' size='sm'>
|
|
{shortNumberFormat(account.get('following_count'))}
|
|
</Text>
|
|
<Text weight='bold' size='sm'>
|
|
<FormattedMessage id='account.follows' defaultMessage='Follows' />
|
|
</Text>
|
|
</HStack>
|
|
</Link>
|
|
)}
|
|
</HStack>
|
|
</Stack>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default UserPanel;
|