this repo has no description
1import { Trans, useLingui } from '@lingui/react/macro';
2
3import getHTMLText from '../utils/getHTMLText';
4
5import Icon from './icon';
6import TranslationBlock from './translation-block';
7
8function TranslatedBioSheet({ note, fields, onClose }) {
9 const { t } = useLingui();
10 const fieldsText =
11 fields
12 ?.map(({ name, value }) => `${name}\n${getHTMLText(value)}`)
13 .join('\n\n') || '';
14
15 const text = getHTMLText(note) + (fieldsText ? `\n\n${fieldsText}` : '');
16
17 return (
18 <div class="sheet">
19 {!!onClose && (
20 <button type="button" class="sheet-close" onClick={onClose}>
21 <Icon icon="x" alt={t`Close`} />
22 </button>
23 )}
24 <header>
25 <h2>
26 <Trans>Translated Bio</Trans>
27 </h2>
28 </header>
29 <main>
30 <p
31 style={{
32 whiteSpace: 'pre-wrap',
33 }}
34 >
35 {text}
36 </p>
37 <TranslationBlock forceTranslate text={text} />
38 </main>
39 </div>
40 );
41}
42
43export default TranslatedBioSheet;