overleaf/services/web/frontend/js/shared/components/translation-message.tsx
Alf Eaton 8dbf2b64f8 [ide-react] Notify about unsaved changes (#16163)
* Notify about unsaved changes
* Move system message components and types to shared folder
* Add system messages component

GitOrigin-RevId: ab81a24888847bd9a8a390fd1af6b58f471f7a4b
2023-12-15 09:03:27 +00:00

41 lines
1.3 KiB
TypeScript

import { Trans, useTranslation } from 'react-i18next'
import Close from './close'
import usePersistedState from '../hooks/use-persisted-state'
import getMeta from '../../utils/meta'
import { SuggestedLanguage } from '../../../../types/system-message'
function TranslationMessage() {
const { t } = useTranslation()
const [hidden, setHidden] = usePersistedState('hide-i18n-notification', false)
const config = getMeta('ol-suggestedLanguage') as SuggestedLanguage
const currentUrl = getMeta('ol-currentUrl') as string
if (hidden) {
return null
}
return (
<li className="system-message">
<Close onDismiss={() => setHidden(true)} />
<div className="text-center">
<a href={config.url + currentUrl}>
<Trans
i18nKey="click_here_to_view_sl_in_lng"
components={[<strong />]} // eslint-disable-line react/jsx-key
values={{ lngName: config.lngName }}
shouldUnescape
tOptions={{ interpolation: { escapeValue: true } }}
/>
<img
className="ms-1"
src={config.imgUrl}
alt={t('country_flag', { country: config.lngName })}
aria-hidden
/>
</a>
</div>
</li>
)
}
export default TranslationMessage