GalleryHeader.js

import React from 'react';
import { Button, Typography, withStyles } from 'material-ui-next';

const styles = theme => ({
  container: {
    display: 'flex',
    alignItems: 'center',
    flexDirection: 'row',
    justifyContent: 'space-between',
    backgroundColor: theme.palette.grey[300],
    paddingLeft: 16,
    paddingRight: 16,
    height: 40,
  },
  inline: {
    display: 'inline',
  },
  inher: {
    display: 'inherit',
    alignItems: 'inherit',
  },
  hilite: {
    color: theme.palette.secondary[400],
  },
});

function GalleryHeader(props) {
  const { versionInfo, classes, onPublish } = props;
  const versionName = versionInfo.versionName || 'Unknown version';
  const published = 'published' in versionInfo ? versionInfo.published : true;

  return (
    <div className={classes.container}>
      <Typography type={'subheading'} className={classes.inline}>
        {versionName}
      </Typography>
      {published && <Typography>published</Typography>}
      {!published && (
        <div className={classes.inher}>
          <Typography className={classes.hilite}>new version</Typography>
          <Button onClick={onPublish}>Publish</Button>
        </div>
      )}
    </div>
  );
}

export default withStyles(styles)(GalleryHeader);