import './account-block.css'; import { useNavigate } from 'react-router-dom'; import emojifyText from '../utils/emojify-text'; import niceDateTime from '../utils/nice-date-time'; import states from '../utils/states'; import Avatar from './avatar'; function AccountBlock({ skeleton, account, avatarSize = 'xl', instance, external, internal, onClick, showActivity = false, }) { if (skeleton) { return (
████████
); } const navigate = useNavigate(); const { id, acct, avatar, avatarStatic, displayName, username, emojis, url, statusesCount, lastStatusAt, } = account; const displayNameWithEmoji = emojifyText(displayName, emojis); const [_, acct1, acct2] = acct.match(/([^@]+)(@.+)/i) || [, acct]; return ( { if (external) return; e.preventDefault(); if (onClick) return onClick(e); if (internal) { navigate(`/${instance}/a/${id}`); } else { states.showAccount = { account, instance, }; } }} > {displayName ? ( ) : ( {username} )}
{showActivity && ( <>
Posts: {statusesCount} {!!lastStatusAt && ( <> {' '} · Last posted:{' '} {niceDateTime(lastStatusAt, { hideTime: true, })} )} )}
); } export default AccountBlock;