@mirrormedia/lilith-draft-renderer/lib/website/mirrormedia/block-renderers/related-post-block.js

## Introduction

"use strict";

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

var _react = _interopRequireDefault(require("react"));

var _styledComponents = _interopRequireDefault(require("styled-components"));

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

const RelatedPostRenderWrapper = _styledComponents.default.div`
  display: flex;
  width: 100%;
`;
const RelatedPostItem = _styledComponents.default.div`
  flex: 0 0 33.3333%;
  border: 1px solid rgba(0, 0, 0, 0.05);
`;
const RelatedPostImage = _styledComponents.default.img`
  display: block;
  width: 100%;
  aspect-ratio: 2;
  object-fit: cover;
`;
const RelatedPostTitle = _styledComponents.default.p`
  margin: 0;
  padding: 12px;
`;

function RelatedPostBlock(entity) {
  const {
    posts
  } = entity.getData();
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(RelatedPostRenderWrapper, null, posts.map(post => {
    var _post$heroImage, _post$heroImage$resiz;

    return /*#__PURE__*/_react.default.createElement(RelatedPostItem, {
      key: post.id
    }, /*#__PURE__*/_react.default.createElement(RelatedPostImage, {
      src: (_post$heroImage = post.heroImage) === null || _post$heroImage === void 0 ? void 0 : (_post$heroImage$resiz = _post$heroImage.resized) === null || _post$heroImage$resiz === void 0 ? void 0 : _post$heroImage$resiz.original,
      onError: e => {
        var _post$heroImage2, _post$heroImage2$imag;

        return e.currentTarget.src = (_post$heroImage2 = post.heroImage) === null || _post$heroImage2 === void 0 ? void 0 : (_post$heroImage2$imag = _post$heroImage2.imageFile) === null || _post$heroImage2$imag === void 0 ? void 0 : _post$heroImage2$imag.url;
      }
    }), /*#__PURE__*/_react.default.createElement(RelatedPostTitle, null, post.title));
  })));
}