soapbox/app/soapbox/components/display-name.tsx

import * as React from 'react';

import HoverRefWrapper from 'soapbox/components/hover_ref_wrapper';
import { useSoapboxConfig } from 'soapbox/hooks';

import { getAcct } from '../utils/accounts';

import Icon from './icon';
import RelativeTimestamp from './relative-timestamp';
import VerificationBadge from './verification_badge';

import type { Account } from 'soapbox/types/entities';

interface IDisplayName {
  account: Account
  withDate?: boolean
}

const DisplayName: React.FC<IDisplayName> = ({ account, children, withDate = false }) => {
  const { displayFqn = false } = useSoapboxConfig();
  const { created_at: createdAt, verified } = account;

  const joinedAt = createdAt ? (
    <div className='account__joined-at'>
      <Icon src={require('@tabler/icons/clock.svg')} />
      <RelativeTimestamp timestamp={createdAt} />
    </div>
  ) : null;

  const displayName = (
    <span className='display-name__name'>
      <bdi><strong className='display-name__html' dangerouslySetInnerHTML={{ __html: account.get('display_name_html') }} /></bdi>
      {verified && <VerificationBadge />}
      {withDate && joinedAt}
    </span>
  );

  const suffix = (<span className='display-name__account'>@{getAcct(account, displayFqn)}</span>);

  return (
    <span className='display-name' data-testid='display-name'>
      <HoverRefWrapper accountId={account.get('id')} inline>
        {displayName}
      </HoverRefWrapper>
      {suffix}
      {children}
    </span>
  );
};

export default DisplayName;