You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
37 lines
1.0 KiB
37 lines
1.0 KiB
import type { ComponentPropsWithoutRef, FC } from 'react'; |
|
|
|
import classNames from 'classnames'; |
|
|
|
import { AnimateEmojiProvider } from '../emoji/context'; |
|
import { EmojiHTML } from '../emoji/html'; |
|
import { Skeleton } from '../skeleton'; |
|
|
|
import type { DisplayNameProps } from './index'; |
|
|
|
export const DisplayNameWithoutDomain: FC< |
|
Omit<DisplayNameProps, 'variant'> & ComponentPropsWithoutRef<'span'> |
|
> = ({ account, className, children, localDomain: _, ...props }) => { |
|
return ( |
|
<AnimateEmojiProvider |
|
{...props} |
|
as='span' |
|
className={classNames('display-name', className)} |
|
> |
|
<bdi> |
|
{account ? ( |
|
<EmojiHTML |
|
className='display-name__html' |
|
htmlString={account.get('display_name_html')} |
|
as='strong' |
|
extraEmojis={account.get('emojis')} |
|
/> |
|
) : ( |
|
<strong className='display-name__html'> |
|
<Skeleton width='10ch' /> |
|
</strong> |
|
)} |
|
</bdi> |
|
{children} |
|
</AnimateEmojiProvider> |
|
); |
|
};
|
|
|