@appearhere/bloom/components/Cards/CondensedSpaceCard/CondensedSpaceCard.js

Appear Here's pattern library and styleguide

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

import css from './CondensedSpaceCard.css';

import LeftRight from '../../LeftRight/LeftRight';
import FittedImage from '../../FittedImage/FittedImage';

const CondensedSpaceCard = (props) => {
  const {
    href,
    images,
    name,
    price,
    priceFromLabel,
    priceUnit,
    className,
  } = props;

  /* eslint-disable react/jsx-no-target-blank */
  return (
    <a
      href={href}
      className={cx(css.root, className)}
      title={name}
      target="_blank"
    >
      <LeftRight
        primarySide="left"
        leftChildren={
          images.length > 0 && (
            <FittedImage
              className={css.image}
              src={images[0].src}
              alt={images[0].alt}
            />
          )
        }
        rightChildren={
          <div className={css.body}>
            <div className={css.name}>
              { priceFromLabel && <span className={css.priceFromLabel}>{ priceFromLabel }</span> }
              <span className={css.price}>{ price }</span>
              { '\u00a0' }
              <span className={css.priceUnit}>{ priceUnit }</span>
            </div>
            <div className={css.name}>{ name }</div>
          </div>
        }
      />
    </a>
  );
  /* eslint-enable react/jsx-no-target-blank */
};

CondensedSpaceCard.propTypes = {
  href: PropTypes.string,
  images: PropTypes.array,
  name: PropTypes.string,
  price: PropTypes.string,
  className: PropTypes.string,
  priceFromLabel: PropTypes.string,
  priceUnit: PropTypes.string,
};

CondensedSpaceCard.defaultProps = {
  images: [],
};

export default CondensedSpaceCard;