diff options
Diffstat (limited to 'front/odiparpack/app/containers/Dashboard')
3 files changed, 208 insertions, 0 deletions
diff --git a/front/odiparpack/app/containers/Dashboard/Dashboard.js b/front/odiparpack/app/containers/Dashboard/Dashboard.js new file mode 100644 index 0000000..94d3eb4 --- /dev/null +++ b/front/odiparpack/app/containers/Dashboard/Dashboard.js @@ -0,0 +1,99 @@ +import React, { PureComponent } from 'react'; +import PropTypes from 'prop-types'; +import brand from 'ba-api/brand'; +import { Helmet } from 'react-helmet'; +import { withStyles } from '@material-ui/core/styles'; +import imgApi from 'ba-api/images'; +import avatarApi from 'ba-api/avatars'; +import { + SliderWidget, + CounterGroupWidget, + BigChartWidget, + TableWidget, + TaskWidget, + ProfileCard, + ProfileWidget, + ProgressWidget, + GeneralCard, + Quote, + PlayerCard +} from 'ba-components'; +import { Grid, Divider } from '@material-ui/core'; +import styles from './dashboard-jss'; + + +class Dashboard extends PureComponent { + render() { + const title = brand.name + ' - Dashboard'; + const description = brand.desc; + const { classes } = this.props; + return ( + <div> + <Helmet> + <title>{title}</title> + <meta name="description" content={description} /> + <meta property="og:title" content={title} /> + <meta property="og:description" content={description} /> + <meta property="twitter:title" content={title} /> + <meta property="twitter:description" content={description} /> + </Helmet> + <Grid container spacing={3} className={classes.root}> + <Grid item md={6} sm={12} xs={12}> + <div className={classes.sliderWrap}> + <SliderWidget /> + </div> + </Grid> + <Grid item md={6} xs={12} className={classes.noPadding}> + <CounterGroupWidget /> + </Grid> + </Grid> + <Divider className={classes.dividerMini} /> + <Grid container spacing={3} className={classes.root}> + <Grid item xs={12}> + <BigChartWidget /> + </Grid> + </Grid> + <Grid container spacing={3} className={classes.root}> + <Grid item md={7} xs={12}> + <Divider className={classes.dividerMini} /> + <TableWidget /> + <Divider className={classes.divider} /> + <TaskWidget /> + <Divider className={classes.divider} /> + <PlayerCard + title="Live From Space" + artist="Mac Miller" + cover={imgApi[32]} + /> + </Grid> + <Grid item md={5}> + <Divider className={classes.dividerMini} /> + <ProfileCard + cover={imgApi[41]} + avatar={avatarApi[6]} + name="John Doe" + title="UX designer" + connection={10} + btnText="See Profile" + isVerified + /> + <Divider className={classes.divider} /> + <ProgressWidget /> + <Divider className={classes.divider} /> + <ProfileWidget /> + <Divider className={classes.divider} /> + <GeneralCard liked={1} shared={20} commented={15}> + <Quote align="left" content="Imagine all the people living life in peace. You may say I'm a dreamer, but I'm not the only one. I hope someday you'll join us, and the world will be as one." footnote="John Lennon" /> + </GeneralCard> + </Grid> + </Grid> + </div> + ); + } +} + +Dashboard.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(Dashboard); diff --git a/front/odiparpack/app/containers/Dashboard/DashboardV2.js b/front/odiparpack/app/containers/Dashboard/DashboardV2.js new file mode 100644 index 0000000..027dad8 --- /dev/null +++ b/front/odiparpack/app/containers/Dashboard/DashboardV2.js @@ -0,0 +1,79 @@ +import React, { PureComponent } from 'react'; +import PropTypes from 'prop-types'; +import brand from 'ba-api/brand'; +import { Helmet } from 'react-helmet'; +import { withStyles } from '@material-ui/core/styles'; +import imgApi from 'ba-api/images'; +import avatarApi from 'ba-api/avatars'; +import { + CounterIconsWidget, + AreaChartWidget, + CarouselWidget, + PostCard, + AlbumWidget, + MapWidget +} from 'ba-components'; +import { Grid, Divider } from '@material-ui/core'; +import styles from './dashboard-jss'; + + +class DashboardV2 extends PureComponent { + render() { + const title = brand.name + ' - Dashboard Version 2'; + const description = brand.desc; + const { classes } = this.props; + return ( + <div> + <Helmet> + <title>{title}</title> + <meta name="description" content={description} /> + <meta property="og:title" content={title} /> + <meta property="og:description" content={description} /> + <meta property="twitter:title" content={title} /> + <meta property="twitter:description" content={description} /> + </Helmet> + <Grid container className={classes.root}> + <CounterIconsWidget /> + </Grid> + <Divider className={classes.divider} /> + <AreaChartWidget /> + <Divider className={classes.divider} /> + <Grid container spacing={3}> + <Grid item xs={12}> + <CarouselWidget /> + </Grid> + </Grid> + <Divider className={classes.divider} /> + <Grid container spacing={3} className={classes.root}> + <Grid item sm={6} xs={12}> + <PostCard + liked={1} + shared={20} + commented={15} + date="Sept, 25 2018" + content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sed urna in justo euismod condimentum." + image={imgApi[16]} + avatar={avatarApi[6]} + name="John Doe" + /> + </Grid> + <Grid item sm={6} xs={12}> + <AlbumWidget /> + </Grid> + </Grid> + <Divider className={classes.divider} /> + <Grid container spacing={3} className={classes.root}> + <Grid item xs={12}> + <MapWidget /> + </Grid> + </Grid> + </div> + ); + } +} + +DashboardV2.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(DashboardV2); diff --git a/front/odiparpack/app/containers/Dashboard/dashboard-jss.js b/front/odiparpack/app/containers/Dashboard/dashboard-jss.js new file mode 100644 index 0000000..adb9bc0 --- /dev/null +++ b/front/odiparpack/app/containers/Dashboard/dashboard-jss.js @@ -0,0 +1,30 @@ +const styles = theme => ({ + root: { + flexGrow: 1, + }, + divider: { + display: 'block', + margin: `${theme.spacing(2)}px 0`, + background: 'none' + }, + sliderWrap: { + position: 'relative', + display: 'block', + boxShadow: theme.shadows[1], + width: '100%', + borderRadius: 4 + }, + dividerMini: { + margin: `${theme.spacing(1.5)}px 0`, + background: 'none' + }, + noPadding: { + paddingTop: '0 !important', + paddingBottom: '0 !important', + [theme.breakpoints.up('sm')]: { + padding: '0 !important' + } + } +}); + +export default styles; |