95 lines
2.3 KiB
TypeScript
95 lines
2.3 KiB
TypeScript
import type { FC } from 'react';
|
|
|
|
import { FormattedMessage, useIntl } from 'react-intl';
|
|
|
|
import classNames from 'classnames';
|
|
import { NavLink } from 'react-router-dom';
|
|
|
|
import {
|
|
FollowersCounter,
|
|
FollowingCounter,
|
|
StatusesCounter,
|
|
} from '@/mastodon/components/counters';
|
|
import { FormattedDateWrapper } from '@/mastodon/components/formatted_date';
|
|
import { ShortNumber } from '@/mastodon/components/short_number';
|
|
import { useAccount } from '@/mastodon/hooks/useAccount';
|
|
|
|
import { isRedesignEnabled } from '../common';
|
|
|
|
import classes from './redesign.module.scss';
|
|
|
|
export const AccountNumberFields: FC<{ accountId: string }> = ({
|
|
accountId,
|
|
}) => {
|
|
const intl = useIntl();
|
|
const account = useAccount(accountId);
|
|
|
|
if (!account) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className={classNames(
|
|
'account__header__extra__links',
|
|
isRedesignEnabled() && classes.fieldNumbersWrapper,
|
|
)}
|
|
>
|
|
{!isRedesignEnabled() && (
|
|
<NavLink
|
|
to={`/@${account.acct}`}
|
|
title={intl.formatNumber(account.statuses_count)}
|
|
>
|
|
<ShortNumber
|
|
value={account.statuses_count}
|
|
renderer={StatusesCounter}
|
|
/>
|
|
</NavLink>
|
|
)}
|
|
|
|
<NavLink
|
|
exact
|
|
to={`/@${account.acct}/following`}
|
|
title={intl.formatNumber(account.following_count)}
|
|
>
|
|
<ShortNumber
|
|
value={account.following_count}
|
|
renderer={FollowingCounter}
|
|
/>
|
|
</NavLink>
|
|
|
|
<NavLink
|
|
exact
|
|
to={`/@${account.acct}/followers`}
|
|
title={intl.formatNumber(account.followers_count)}
|
|
>
|
|
<ShortNumber
|
|
value={account.followers_count}
|
|
renderer={FollowersCounter}
|
|
/>
|
|
</NavLink>
|
|
|
|
{isRedesignEnabled() && (
|
|
<NavLink exact to={`/@${account.acct}`}>
|
|
<FormattedMessage
|
|
id='account.joined_long'
|
|
defaultMessage='Joined on {date}'
|
|
values={{
|
|
date: (
|
|
<strong>
|
|
<FormattedDateWrapper
|
|
value={account.created_at}
|
|
year='numeric'
|
|
month='short'
|
|
day='2-digit'
|
|
/>
|
|
</strong>
|
|
),
|
|
}}
|
|
/>
|
|
</NavLink>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|