refactor

web/src/components/DialogTorrentDetailsContent/widgets.jsx

@@ -0,0 +1,68 @@
+import {
+  ArrowDownward as ArrowDownwardIcon,
+  ArrowUpward as ArrowUpwardIcon,
+  SwapVerticalCircle as SwapVerticalCircleIcon,
+  ViewAgenda as ViewAgendaIcon,
+  Widgets as WidgetsIcon,
+  PhotoSizeSelectSmall as PhotoSizeSelectSmallIcon,
+  Build as BuildIcon,
+} from '@material-ui/icons'
+import { getPeerString, humanizeSize } from 'utils/Utils'
+
+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 UploadSpeedWidget = ({ data }) => (
+  <StatisticsField
+    title='Upload speed'
+    value={humanizeSize(data) || '0 B'}
+    iconBg='#0146ad'
+    valueBg='#0058db'
+    icon={ArrowUpwardIcon}
+  />
+)
+
+export const PeersWidget = ({ data }) => (
+  <StatisticsField
+    title='Peers'
+    value={getPeerString(data)}
+    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 SizeWidget = ({ data }) => (
+  <StatisticsField
+    title='Torrent size'
+    value={humanizeSize(data)}
+    iconBg='#9b01ad'
+    valueBg='#ac03bf'
+    icon={ViewAgendaIcon}
+  />
+)