mirror of
https://github.com/dzeiocom/components.git
synced 2025-04-22 19:02:15 +00:00
50 lines
1018 B
TypeScript
50 lines
1018 B
TypeScript
import React from 'react'
|
|
import css from './ProgressBox.module.styl'
|
|
import ProgressBar from '../ProgressBar'
|
|
import Row from '../Row'
|
|
import Col from '../Col'
|
|
import Text from '../Text'
|
|
import Box from '../Box'
|
|
|
|
interface Props {
|
|
/**
|
|
* Number between 0 and 100%
|
|
*/
|
|
progress: number
|
|
|
|
/**
|
|
* Text displayed in the middle
|
|
*/
|
|
text: string
|
|
|
|
/**
|
|
* text displayed in the right of the box
|
|
*/
|
|
textProgress: string
|
|
}
|
|
|
|
/**
|
|
* Display a simple Progress box that can be used for multiple things
|
|
*
|
|
* @version 1.0.0
|
|
*/
|
|
export default class extends React.PureComponent<Props> {
|
|
|
|
public render = () => (
|
|
<Box noPadding noBottomBorder>
|
|
<Row className={css.padding}>
|
|
<Col nogrow>
|
|
<Text color="main">{this.props.progress}%</Text>
|
|
</Col>
|
|
<Col>
|
|
<Text weight="bold" align="center">{this.props.text}</Text>
|
|
</Col>
|
|
<Col nogrow>
|
|
<Text color="main">{this.props.textProgress}</Text>
|
|
</Col>
|
|
</Row>
|
|
<ProgressBar noRoundBorders progress={this.props.progress} />
|
|
</Box>
|
|
)
|
|
}
|