@appearhere/bloom/components/AreaUnits/AreaUnits.js

Appear Here's pattern library and styleguide

import PropTypes from 'prop-types';
import React from 'react';

import { AREA_UNITS } from '../../constants/units';

const AreaUnits = ({ value, unit, className, ...rest }) => {
  switch (unit) {
    case AREA_UNITS.METERS_SQUARED: return (
      <span
        {...rest}
        className={className}
      >
        { value }
        m&sup2;
      </span>
    );
    case AREA_UNITS.SQUARE_FOOT:
    default: return (
      <span
        {...rest}
        className={className}
      >
        { value } sq ft
      </span>
    );
  }
};

AreaUnits.propTypes = {
  value: PropTypes.oneOfType([
    PropTypes.number,
    PropTypes.string,
  ]).isRequired,
  unit: PropTypes.string.isRequired,
  className: PropTypes.string,
};

AreaUnits.defaultProps = {
  unit: AREA_UNITS.SQUARE_FOOT,
};

export default AreaUnits;