51 lines
1.5 KiB
TypeScript
51 lines
1.5 KiB
TypeScript
import type { FC } from 'react';
|
|
|
|
import { FormattedMessage } from 'react-intl';
|
|
|
|
import type { AccountField } from '@/mastodon/components/account_header/fields';
|
|
import { Button } from '@/mastodon/components/button';
|
|
import { EmojiHTML } from '@/mastodon/components/emoji/html';
|
|
import {
|
|
ModalShell,
|
|
ModalShellActions,
|
|
ModalShellBody,
|
|
} from '@/mastodon/components/modal_shell';
|
|
import { NavigationFocusTarget } from '@/mastodon/components/navigation_focus_target';
|
|
|
|
import { useFieldHtml } from '../hooks/useFieldHtml';
|
|
|
|
import classes from './styles.module.scss';
|
|
|
|
export const AccountFieldModal: FC<{
|
|
onClose: () => void;
|
|
field: AccountField;
|
|
}> = ({ onClose, field }) => {
|
|
const handleLabelElement = useFieldHtml(field.nameHasEmojis);
|
|
const handleValueElement = useFieldHtml(field.valueHasEmojis);
|
|
return (
|
|
<ModalShell>
|
|
<ModalShellBody>
|
|
<NavigationFocusTarget as='h1'>
|
|
<EmojiHTML
|
|
as='span'
|
|
htmlString={field.name_emojified}
|
|
onElement={handleLabelElement}
|
|
className={classes.fieldName}
|
|
/>
|
|
</NavigationFocusTarget>
|
|
<EmojiHTML
|
|
as='p'
|
|
htmlString={field.value_emojified}
|
|
onElement={handleValueElement}
|
|
className={classes.fieldValue}
|
|
/>
|
|
</ModalShellBody>
|
|
<ModalShellActions>
|
|
<Button onClick={onClose} plain>
|
|
<FormattedMessage id='lightbox.close' defaultMessage='Close' />
|
|
</Button>
|
|
</ModalShellActions>
|
|
</ModalShell>
|
|
);
|
|
};
|