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

UI components for Prezly themes

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Hero = Hero;
var _react = _interopRequireDefault(require("react"));
var _solid = require("@heroicons/react/24/solid");
var _link = _interopRequireDefault(require("next/link"));
var _tailwindMerge = require("tailwind-merge");
var _index = require("../Button/index.cjs");
var _index2 = require("../CategoriesList/index.cjs");
var _index3 = require("../StoryPublicationDate/index.cjs");
var _index4 = require("./components/index.cjs");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function Hero(_ref) {
  var {
    story,
    categories = [],
    showDate,
    locale,
    dateFormat,
    newsroomName,
    logo,
    size = 'default',
    hideSubtitle,
    className
  } = _ref;
  var {
    href,
    title,
    subtitle
  } = story;
  return /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _tailwindMerge.twMerge)('flex flex-col items-center p-0 bg-white gap-0 md:gap-12 group', size === 'large' ? 'md:flex-row-reverse' : 'md:flex-row md:p-12', className)
  }, /*#__PURE__*/_react.default.createElement(_link.default, {
    className: (0, _tailwindMerge.twMerge)('w-full md:w-1/2', size === 'large' ? 'aspect-[30/30]' : 'aspect-[27/17]'),
    href: href
  }, /*#__PURE__*/_react.default.createElement(_index4.HeroImage, {
    className: "cursor-pointer",
    logo: logo,
    newsroomName: newsroomName,
    placeholderClassName: "",
    size: size,
    story: story
  })), /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _tailwindMerge.twMerge)('w-full md:w-1/2', size === 'large' ? 'p-6 md:px-12 md:py-20' : 'p-6 md:p-0')
  }, /*#__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(_index3.StoryPublicationDate, {
    dateFormat: dateFormat,
    locale: locale
  })), 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(_index2.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: "title-medium cursor-pointer group-hover:text-gray-950"
  }, title)), Boolean(!hideSubtitle && subtitle) && /*#__PURE__*/_react.default.createElement("p", {
    className: "subtitle-medium mt-3 line-clamp-3 text-ellipsis group-hover:text-gray-950"
  }, subtitle), /*#__PURE__*/_react.default.createElement(_index.ButtonLink, {
    className: (0, _tailwindMerge.twMerge)('mt-6 w-max', size === 'default' && 'md:hidden'),
    href: href,
    icon: _solid.ArrowRightIcon,
    iconPlacement: "right",
    size: "small",
    variation: "primary"
  }, "Read more"))));
}