backpack-ui/dist/components/slideTall/index.js

Lonely Planet's Components

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

var _propTypes = require("prop-types");

var _propTypes2 = _interopRequireDefault(_propTypes);

var _link = require("../link");

var _link2 = _interopRequireDefault(_link);

var _colors = require("../../styles/colors");

var _colors2 = _interopRequireDefault(_colors);

var _zIndex = require("../../styles/zIndex");

var _zIndex2 = _interopRequireDefault(_zIndex);

var _gradientOverlay = require("../gradientOverlay");

var _gradientOverlay2 = _interopRequireDefault(_gradientOverlay);

var _heroImageContainer = require("../heroImageContainer");

var _heroImageContainer2 = _interopRequireDefault(_heroImageContainer);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var styles = {
  title: {
    color: _colors2.default.bgPrimary,
    zIndex: _zIndex2.default.middle
  }
};

var SlideTall = function SlideTall(item, index) {
  return _react2.default.createElement(
    _link2.default,
    {
      className: "TallCarousel-slide",
      to: item.link,
      key: index
    },
    _react2.default.createElement(
      _heroImageContainer2.default,
      { imagePath: item.image },
      _react2.default.createElement(_gradientOverlay2.default, null),
      _react2.default.createElement(
        "p",
        { style: styles.title },
        item.type
      )
    )
  );
};

SlideTall.propTypes = {
  item: _propTypes2.default.shape({
    link: _propTypes2.default.string,
    image: _propTypes2.default.string,
    type: _propTypes2.default.string
  }),
  index: _propTypes2.default.number
};

exports.default = SlideTall;