catstodon/app/javascript/flavours/glitch/features/drawer/account/index.js

//  Package imports.
import React from 'react';
import ImmutablePropTypes from 'react-immutable-proptypes';
import {
  FormattedMessage,
  defineMessages,
} from 'react-intl';

//  Components.
import Avatar from 'flavours/glitch/components/avatar';
import Permalink from 'flavours/glitch/components/permalink';

//  Utils.
import { hiddenComponent } from 'flavours/glitch/util/react_helpers';

//  Messages.
const messages = defineMessages({
  edit: {
    defaultMessage: 'Edit profile',
    id: 'navigation_bar.edit_profile',
  },
});

//  The component.
export default function DrawerAccount ({ account }) {

  //  We need an account to render.
  if (!account) {
    return (
      <div className='drawer--pager--account'>
        <a
          className='edit'
          href='/settings/profile'
        >
          <FormattedMessage {...messages.edit} />
        </a>
      </div>
    );
  }

  //  The result.
  return (
    <div className='drawer--pager--account'>
      <Permalink
        className='avatar'
        href={account.get('url')}
        to={`/accounts/${account.get('id')}`}
      >
        <span {...hiddenComponent}>{account.get('acct')}</span>
        <Avatar
          account={account}
          size={40}
        />
      </Permalink>
      <Permalink
        className='acct'
        href={account.get('url')}
        to={`/accounts/${account.get('id')}`}
      >
        <strong>@{account.get('acct')}</strong>
      </Permalink>
      <a
        className='edit'
        href='/settings/profile'
      ><FormattedMessage {...messages.edit} /></a>
    </div>
  );
}

DrawerAccount.propTypes = { account: ImmutablePropTypes.map };