import './account-block.css'; // import { useNavigate } from 'react-router-dom'; import enhanceContent from '../utils/enhance-content'; import niceDateTime from '../utils/nice-date-time'; 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} )}
)} {showActivity && ( <>
Posts: {statusesCount} {!!lastStatusAt && ( <> {' '} · Last posted:{' '} {niceDateTime(lastStatusAt, { hideTime: true, })} )} )} {showStats && (
{bot && ( <> Automated )} {!!group && ( <> Group )} {!!verifiedField && ( {' '} )}
)}
); } export default AccountBlock;