import React from "react"
import { Button } from "react-bootstrap"
import PropTypes from "prop-types"

const PeriodsNavigation = ({ offset, onChange }) => (
  <>
    <Button
      bsStyle="default"
      type="button"
      onClick={() => onChange(offset + 1)}
    >
      previous period
    </Button>
    {offset - 1 >= 0 && (
      <Button
        bsStyle="default"
        type="button"
        onClick={() => onChange(offset - 1)}
      >
        next period
      </Button>
    )}
  </>
)
PeriodsNavigation.propTypes = {
  offset: PropTypes.number,
  onChange: PropTypes.func
}

export default PeriodsNavigation

import { Icon } from "@blueprintjs/core"
import { IconNames } from "@blueprintjs/icons"
import PropTypes from "prop-types"
import React from "react"
import { Button } from "react-bootstrap"

const PeriodsNavigation = ({ offset, onChange }) => (
  <div style={{ display: "flex", justifyContent: "space-between" }}>
    <Button
      bsStyle="default"
      type="button"
      onClick={() => onChange(offset + 1)}
    >
      <Icon icon={IconNames.DOUBLE_CHEVRON_LEFT} /> previous period
    </Button>
    <Button
      bsStyle="default"
      type="button"
      onClick={() => onChange(offset - 1)}
    >
      next period <Icon icon={IconNames.DOUBLE_CHEVRON_RIGHT} />
    </Button>
  </div>
)
PeriodsNavigation.propTypes = {
  offset: PropTypes.number,
  onChange: PropTypes.func
}

export default PeriodsNavigation

Add icons and alignment to period navigation buttons