@mirrormedia/lilith-draft-renderer/lib/website/readr/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 RelatedPostWrapper = _styledComponents.default.div`
  display: flex;
  flex-direction: column;
  width: 100%;
  border: 2px solid #04295e;
  border-width: 2px 2px 2px 12px;
  padding: 16px;
  ${({
  theme
}) => theme.margin.default};

  ${({
  theme
}) => theme.breakpoint.md} {
    padding: 24px;
  }
`;
const RelatedPostTitle = _styledComponents.default.p`
  color: #04295e;
  font-size: 14px;
  line-height: 20px;
  margin: 0 0 -8px;
  ${({
  theme
}) => theme.breakpoint.md} {
    font-size: 16px;
    line-height: 23px;
  }
`;
const RelatedPostItem = _styledComponents.default.div`
  display: flex;
`;
const RelatedPostAnchorWrapper = _styledComponents.default.a`
  text-decoration: none;
  display: inline-block;
  margin: 12px 0 0;

  &:hover span {
    border-bottom: 2px solid #04295e;
  }
`;
const RelatedPost = _styledComponents.default.span`
  color: rgba(0, 9, 40, 0.87);
  font-size: 18px;
  line-height: 1.6;
  border-bottom: 2px solid #ebf02c;
  padding-bottom: 2px;
`;

function RelatedPostBlock(entity) {
  const {
    posts
  } = entity.getData();
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(RelatedPostWrapper, null, /*#__PURE__*/_react.default.createElement(RelatedPostTitle, null, "\u63A8\u85A6\u95B1\u8B80"), posts.map(post => /*#__PURE__*/_react.default.createElement(RelatedPostItem, {
    key: post.id
  }, /*#__PURE__*/_react.default.createElement(RelatedPostAnchorWrapper, {
    href: `/post/${post.id}`,
    target: "_blank"
  }, /*#__PURE__*/_react.default.createElement(RelatedPost, null, post.name))))));
}