import './account-block.css';
// import { useNavigate } from 'react-router-dom';
import enhanceContent from '../utils/enhance-content';
import niceDateTime from '../utils/nice-date-time';
import shortenNumber from '../utils/shorten-number';
import states from '../utils/states';
import Avatar from './avatar';
import EmojiText from './emoji-text';
import Icon from './icon';
function AccountBlock({
skeleton,
account,
avatarSize = 'xl',
instance,
external,
internal,
onClick,
showActivity = false,
showStats = false,
accountInstance,
hideDisplayName = false,
}) {
if (skeleton) {
return (
);
}
// const navigate = useNavigate();
const {
id,
acct,
avatar,
avatarStatic,
displayName,
username,
emojis,
url,
statusesCount,
lastStatusAt,
bot,
fields,
note,
group,
} = account;
let [_, acct1, acct2] = acct.match(/([^@]+)(@.+)/i) || [, acct];
if (accountInstance) {
acct2 = `@${accountInstance}`;
}
const verifiedField = fields?.find((f) => !!f.verifiedAt && !!f.value);
return (
{
if (external) return;
e.preventDefault();
if (onClick) return onClick(e);
if (internal) {
// navigate(`/${instance}/a/${id}`);
location.hash = `/${instance}/a/${id}`;
} else {
states.showAccount = {
account,
instance,
};
}
}}
>
{!hideDisplayName && (
<>
{displayName ? (
) : (
{username}
)}
>
)}
@{acct1}
{acct2}
{showActivity && (
<>
Posts: {statusesCount}
{!!lastStatusAt && (
<>
{' '}
· Last posted:{' '}
{niceDateTime(lastStatusAt, {
hideTime: true,
})}
>
)}
>
)}
{showStats && (
{bot && (
<>
Automated
>
)}
{!!group && (
<>
Group
>
)}
{!!verifiedField && (
{' '}
)}
)}
);
}
export default AccountBlock;