filecoin-project/slate
1
1
Fork 0
mirror of https://github.com/filecoin-project/slate.git synced 2024-11-10 04:35:47 +03:00
Code Issues Packages Projects Releases Wiki Activity

Feature: Solve issues 52

Browse Source
This commit is contained in:
Oluwaseun Oyebade 2020-07-18 18:27:54 +01:00
parent 17524f61ee
commit f0ada6713f
2 changed files with 27 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
components/system/components/Stat.js
View File

@ -1,6 +1,7 @@
import * as React from "react";
import * as Constants from "~/common/constants";
import * as SVG from "~/components/system/svg";
import * as Strings from "~/common/strings"
import { css } from "@emotion/react";
@ -16,19 +17,21 @@ const STYLES_BANDWIDTH = css`
`;
export const StatUpload = (props) => {
const size = Strings.bytesToSize(props.size, props.decimal || 2)
return (
<div css={STYLES_BANDWIDTH} style={props.style}>
<SVG.BandwidthUp height="16px" style={{ marginRight: 8 }} />{" "}
{props.children}
{size}
</div>
);
};
export const StatDownload = (props) => {
const size = Strings.bytesToSize(props.size, props.decimal || 2)
return (
<div css={STYLES_BANDWIDTH} style={props.style}>
<SVG.BandwidthDown height="16px" style={{ marginRight: 8 }} />{" "}
{props.children}
{size}
</div>
);
};

33
pages/system/stats.js
View File

@ -1,19 +1,26 @@
import * as React from 'react';
import * as System from '~/components/system';
import * as React from "react";
import * as System from "~/components/system";
import SystemPage from '~/components/system/SystemPage';
import ViewSourceLink from '~/components/system/ViewSourceLink';
import SystemPage from "~/components/system/SystemPage";
import ViewSourceLink from "~/components/system/ViewSourceLink";
export default class SystemPageStats extends React.Component {
render() {
return (
<SystemPage title="SDS: Stats" description="..." url="https://fps.onrender.com/system/stats">
<SystemPage
title="SDS: Stats"
description="..."
url="https://fps.onrender.com/system/stats"
>
<System.H1>
Stats <ViewSourceLink file="system/stats.js" />
</System.H1>
<br />
<br />
<System.P>The System Stats component is used to show a system stat with an upload or a download icon.</System.P>
<System.P>
The System Stats component is used to show a system stat with an
upload or a download icon.
</System.P>
<br />
<br />
<br />
@ -26,7 +33,7 @@ export default class SystemPageStats extends React.Component {
<br />
<br />
<System.CodeBlock>
{`import * as React from 'react';
{`import * as React from 'react';
import { StatUpload, StatDownload } from 'slate-react-system';`}
</System.CodeBlock>
<br />
@ -34,13 +41,16 @@ import { StatUpload, StatDownload } from 'slate-react-system';`}
<System.H2>Usage</System.H2>
<hr />
<br />
<System.P>Delcare the StatUpload and/or the StatDownload components.</System.P>
<System.P>
Delcare the StatUpload and/or the StatDownload components. Decimal
prop is optional as it defaults to 2
</System.P>
<br />
<System.CodeBlock>
{`class ExampleOne extends React.Component {
render() {
return(
<StatUpload>40 mb</StatUpload>
<StatUpload size="40000000" decimal="5" />
)
}
}
@ -48,7 +58,7 @@ import { StatUpload, StatDownload } from 'slate-react-system';`}
class ExampleTwo extends React.Component {
render() {
return(
<StatDownload>40 mb</StatDownload>
<StatDownload size="40000000" />
)
}
}`}
@ -58,7 +68,8 @@ class ExampleTwo extends React.Component {
<System.H2>Output</System.H2>
<hr />
<br />
<System.StatUpload>40 mb</System.StatUpload> <System.StatDownload>40 mb</System.StatDownload>
<System.StatUpload size="40000000" decimal="5" />{" "}
<System.StatDownload size="40000000" />
</SystemPage>
);
}