// 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--account'> <a className='edit' href='/settings/profile' > <FormattedMessage {...messages.edit} /> </a> </div> ); } // The result. return ( <div className='drawer--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> ); } // Props. DrawerAccount.propTypes = { account: ImmutablePropTypes.map };