accounts-frontend/packages/app/components/languageSwitcher/LocaleItem.tsx

49 lines
1.5 KiB
TypeScript
Raw Normal View History

import React, { ComponentType, ReactNode } from 'react';
import { localeFlags } from 'app/components/i18n';
import { FormattedMessage as Message } from 'react-intl';
2019-12-07 16:58:52 +05:30
import styles from './languageSwitcher.scss';
import { LocaleData } from './LanguageSwitcherPopup';
interface Props {
2020-05-24 04:38:24 +05:30
locale: LocaleData;
}
2020-05-24 04:38:24 +05:30
const LocaleItem: ComponentType<Props> = ({ locale: { code, name, englishName, progress, isReleased } }) => {
let progressLabel: ReactNode;
2020-05-24 04:38:24 +05:30
if (progress !== 100) {
progressLabel = (
<Message
key="translationProgress"
defaultMessage="{progress}% translated"
2020-05-24 04:38:24 +05:30
values={{
progress,
}}
/>
);
} else if (!isReleased) {
progressLabel = <Message key="mayBeInaccurate" defaultMessage="May be inaccurate" />;
2020-05-24 04:38:24 +05:30
}
2020-05-24 04:38:24 +05:30
return (
<div className={styles.languageFlex}>
<div
className={styles.languageIco}
style={{
backgroundImage: `url('${localeFlags.getIconUrl(code)}')`,
}}
/>
<div className={styles.languageCaptions}>
<div className={styles.languageName}>{name}</div>
<div className={styles.languageSubName}>
{englishName} {progressLabel ? '| ' : ''} {progressLabel}
</div>
</div>
<span className={styles.languageCircle} />
</div>
2020-05-24 04:38:24 +05:30
);
};
export default LocaleItem;