37 lines
913 B
TypeScript
37 lines
913 B
TypeScript
import React from 'react';
|
|
import { Link } from 'react-router-dom';
|
|
|
|
import { useAccount } from 'pl-fe/api/hooks/accounts/use-account';
|
|
|
|
import HoverAccountWrapper from './hover-account-wrapper';
|
|
|
|
interface IStatusMention {
|
|
accountId: string;
|
|
fallback?: JSX.Element;
|
|
}
|
|
|
|
const StatusMention: React.FC<IStatusMention> = ({ accountId, fallback }) => {
|
|
const { account } = useAccount(accountId);
|
|
|
|
if (!account) return (
|
|
<HoverAccountWrapper accountId={accountId} element='span'>
|
|
{fallback}
|
|
</HoverAccountWrapper>
|
|
);
|
|
|
|
return (
|
|
<HoverAccountWrapper accountId={accountId} element='span'>
|
|
<Link
|
|
to={`/@${account.acct}`}
|
|
className='text-primary-600 hover:underline dark:text-accent-blue'
|
|
dir='ltr'
|
|
onClick={(e) => e.stopPropagation()}
|
|
>
|
|
@{account.acct}
|
|
</Link>
|
|
</HoverAccountWrapper>
|
|
);
|
|
};
|
|
|
|
export { StatusMention as default };
|