47 lines
1.4 KiB
TypeScript
47 lines
1.4 KiB
TypeScript
|
import React from 'react';
|
||
|
|
|
||
|
|
import Avatar from 'soapbox/components/avatar';
|
||
|
|
import DisplayName from 'soapbox/components/display_name';
|
||
|
|
import Permalink from 'soapbox/components/permalink';
|
||
|
|
import ActionButton from 'soapbox/features/ui/components/action_button';
|
||
|
|
import { useAppSelector } from 'soapbox/hooks';
|
||
|
|
import { makeGetAccount } from 'soapbox/selectors';
|
||
|
|
|
||
|
|
const getAccount = makeGetAccount();
|
||
|
|
|
||
|
|
const getFirstSentence = (str: string) => {
|
||
|
|
const arr = str.split(/(([.?!]+\s)|[．。？！\n•])/);
|
||
|
|
|
||
|
|
return arr[0];
|
||
|
|
};
|
||
|
|
|
||
|
|
interface IAccount {
|
||
|
|
id: string,
|
||
|
|
}
|
||
|
|
|
||
|
|
const Account: React.FC<IAccount> = ({ id }) => {
|
||
|
|
const account = useAppSelector((state) => getAccount(state, id));
|
||
|
|
|
||
|
|
if (!account) return null;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className='account follow-recommendations-account'>
|
||
|
|
<div className='account__wrapper'>
|
||
|
|
<Permalink className='account__display-name account__display-name--with-note' title={account.acct} href={account.url} to={`/@${account.get('acct')}`}>
|
||
|
|
<div className='account__avatar-wrapper'><Avatar account={account} size={36} /></div>
|
||
|
|
|
||
|
|
<DisplayName account={account} />
|
||
|
|
|
||
|
|
<div className='account__note'>{getFirstSentence(account.get('note_plain'))}</div>
|
||
|
|
</Permalink>
|
||
|
|
|
||
|
|
<div className='account__relationship'>
|
||
|
|
<ActionButton account={account} />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default Account;
|