translate widgets

web/src/components/DialogTorrentDetailsContent/widgets.jsx

@@ -8,61 +8,81 @@ import {
   Build as BuildIcon,
 } from '@material-ui/icons'
 import { getPeerString, humanizeSize } from 'utils/Utils'
+import { useTranslation } from 'react-i18next'
 
 import StatisticsField from './StatisticsField'
 
-export const DownlodSpeedWidget = ({ data }) => (
-  <StatisticsField
-    title='Download speed'
-    value={humanizeSize(data) || '0 B'}
-    iconBg='#118f00'
-    valueBg='#13a300'
-    icon={ArrowDownwardIcon}
-  />
-)
+export const DownlodSpeedWidget = ({ data }) => {
+  const { t } = useTranslation()
+  return (
+    <StatisticsField
+      title={t('DownloadSpeed')}
+      value={humanizeSize(data) || '0 B'}
+      iconBg='#118f00'
+      valueBg='#13a300'
+      icon={ArrowDownwardIcon}
+    />
+  )
+}
 
-export const UploadSpeedWidget = ({ data }) => (
-  <StatisticsField
-    title='Upload speed'
-    value={humanizeSize(data) || '0 B'}
-    iconBg='#0146ad'
-    valueBg='#0058db'
-    icon={ArrowUpwardIcon}
-  />
-)
+export const UploadSpeedWidget = ({ data }) => {
+  const { t } = useTranslation()
+  return (
+    <StatisticsField
+      title={t('UploadSpeed')}
+      value={humanizeSize(data) || '0 B'}
+      iconBg='#0146ad'
+      valueBg='#0058db'
+      icon={ArrowUpwardIcon}
+    />
+  )
+}
 
-export const PeersWidget = ({ data }) => (
-  <StatisticsField
-    title='Peers'
-    value={getPeerString(data) || '[0] 0 / 0'}
-    iconBg='#cdc118'
-    valueBg='#d8cb18'
-    icon={SwapVerticalCircleIcon}
-  />
-)
+export const PeersWidget = ({ data }) => {
+  const { t } = useTranslation()
+  return (
+    <StatisticsField
+      title={t('Peers')}
+      value={getPeerString(data) || '[0] 0 / 0'}
+      iconBg='#cdc118'
+      valueBg='#d8cb18'
+      icon={SwapVerticalCircleIcon}
+    />
+  )
+}
 
-export const PiecesCountWidget = ({ data }) => (
-  <StatisticsField title='Pieces count' value={data} iconBg='#b6c95e' valueBg='#c0d076' icon={WidgetsIcon} />
-)
-export const PiecesLengthWidget = ({ data }) => (
-  <StatisticsField
-    title='Pieces length'
-    value={humanizeSize(data)}
-    iconBg='#0982c8'
-    valueBg='#098cd7'
-    icon={PhotoSizeSelectSmallIcon}
-  />
-)
-export const StatusWidget = ({ data }) => (
-  <StatisticsField title='Torrent status' value={data} iconBg='#aea25b' valueBg='#b4aa6e' icon={BuildIcon} />
-)
+export const PiecesCountWidget = ({ data }) => {
+  const { t } = useTranslation()
+  return <StatisticsField title={t('PiecesCount')} value={data} iconBg='#b6c95e' valueBg='#c0d076' icon={WidgetsIcon} />
+}
 
-export const SizeWidget = ({ data }) => (
-  <StatisticsField
-    title='Torrent size'
-    value={humanizeSize(data)}
-    iconBg='#9b01ad'
-    valueBg='#ac03bf'
-    icon={ViewAgendaIcon}
-  />
-)
+export const PiecesLengthWidget = ({ data }) => {
+  const { t } = useTranslation()
+  return (
+    <StatisticsField
+      title={t('PiecesLength')}
+      value={humanizeSize(data)}
+      iconBg='#0982c8'
+      valueBg='#098cd7'
+      icon={PhotoSizeSelectSmallIcon}
+    />
+  )
+}
+
+export const StatusWidget = ({ data }) => {
+  const { t } = useTranslation()
+  return <StatisticsField title={t('TorrentStatus')} value={data} iconBg='#aea25b' valueBg='#b4aa6e' icon={BuildIcon} />
+}
+
+export const SizeWidget = ({ data }) => {
+  const { t } = useTranslation()
+  return (
+    <StatisticsField
+      title={t('TorrentSize')}
+      value={humanizeSize(data)}
+      iconBg='#9b01ad'
+      valueBg='#ac03bf'
+      icon={ViewAgendaIcon}
+    />
+  )
+}