@prezly/theme-kit-ui/build/components/StoryCard/StoryCard.cjs

UI components for Prezly themes

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.StoryCard = StoryCard;
var _react = _interopRequireDefault(require("react"));
var _link = _interopRequireDefault(require("next/link"));
var _tailwindMerge = require("tailwind-merge");
var _index = require("../CategoriesList/index.cjs");
var _index2 = require("../StoryPublicationDate/index.cjs");
var _index3 = require("./components/index.cjs");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function StoryCard(_ref) {
  var {
    story,
    categories = [],
    dateFormat,
    showDate,
    locale,
    newsroomName,
    logo,
    size = 'large',
    showSubtitle = true,
    className
  } = _ref;
  var {
    href,
    title,
    subtitle
  } = story;
  return /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _tailwindMerge.twMerge)('flex flex-row items-center p-0 bg-white group sm:max-w-[530px]', size === 'large' ? 'flex-col gap-0' : 'md:flex-row sm:max-w-none items-start gap-4', className)
  }, /*#__PURE__*/_react.default.createElement(_link.default, {
    className: (0, _tailwindMerge.twMerge)('aspect-[10/7]', size === 'large' ? 'w-full md:aspect-[27/17]' : 'w-1/3 hidden md:block md:max-w-[200px]'),
    href: href
  }, /*#__PURE__*/_react.default.createElement(_index3.StoryImage, {
    className: "cursor-pointer",
    logo: logo,
    newsroomName: newsroomName,
    placeholderClassName: "",
    size: size,
    story: story
  })), /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _tailwindMerge.twMerge)(size === 'large' ? 'p-6 md:py-6 md:px-0 w-full' : 'py-1 md:py-1 w-full md:w-2/3')
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "flex flex-wrap items-center gap-1"
  }, showDate && /*#__PURE__*/_react.default.createElement("span", {
    className: "label-large text-gray-500 shrink-0"
  }, /*#__PURE__*/_react.default.createElement(_index2.StoryPublicationDate, {
    locale: locale,
    dateFormat: dateFormat
  })), categories.length > 0 && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
    className: "label-large text-gray-500"
  }, "\xB7"), /*#__PURE__*/_react.default.createElement(_index.CategoriesList, {
    categories: categories
  }))), /*#__PURE__*/_react.default.createElement("div", {
    className: "mt-4"
  }, /*#__PURE__*/_react.default.createElement(_link.default, {
    href: href
  }, /*#__PURE__*/_react.default.createElement("h2", {
    className: (0, _tailwindMerge.twMerge)('cursor-pointer', size === 'large' ? 'title-small ' : 'title-xx-small', 'group-hover:text-gray-950')
  }, title)), Boolean(showSubtitle && subtitle) && /*#__PURE__*/_react.default.createElement("p", {
    className: (0, _tailwindMerge.twMerge)('mt-3 text-ellipsis', size === 'large' ? 'subtitle-small line-clamp-3' : 'label-large font-medium text-gray-800 line-clamp-2', 'group-hover:text-gray-950')
  }, subtitle))));
}