@prezly/theme-kit-ui
Version:
UI components for Prezly themes
68 lines • 2.67 kB
JavaScript
import React from "react";
import { ArrowRightIcon } from '@heroicons/react/24/solid';
import Link from 'next/link';
import { twMerge } from 'tailwind-merge';
import { ButtonLink } from "../Button/index.mjs";
import { CategoriesList } from "../CategoriesList/index.mjs";
import { StoryPublicationDate } from "../StoryPublicationDate/index.mjs";
import { HeroImage } from "./components/index.mjs";
export function Hero(_ref) {
var {
story,
categories = [],
showDate,
locale,
dateFormat,
newsroomName,
logo,
size = 'default',
hideSubtitle,
className
} = _ref;
var {
href,
title,
subtitle
} = story;
return /*#__PURE__*/React.createElement("div", {
className: 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.createElement(Link, {
className: twMerge('w-full md:w-1/2', size === 'large' ? 'aspect-[30/30]' : 'aspect-[27/17]'),
href: href
}, /*#__PURE__*/React.createElement(HeroImage, {
className: "cursor-pointer",
logo: logo,
newsroomName: newsroomName,
placeholderClassName: "",
size: size,
story: story
})), /*#__PURE__*/React.createElement("div", {
className: twMerge('w-full md:w-1/2', size === 'large' ? "p-6 md:px-12 md:py-20" : "p-6 md:p-0")
}, /*#__PURE__*/React.createElement("div", {
className: "flex flex-wrap items-center gap-1"
}, showDate && /*#__PURE__*/React.createElement("span", {
className: "label-large text-gray-500 shrink-0"
}, /*#__PURE__*/React.createElement(StoryPublicationDate, {
dateFormat: dateFormat,
locale: locale
})), categories.length > 0 && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
className: "label-large text-gray-500"
}, "\xB7"), /*#__PURE__*/React.createElement(CategoriesList, {
categories: categories
}))), /*#__PURE__*/React.createElement("div", {
className: "mt-4"
}, /*#__PURE__*/React.createElement(Link, {
href: href
}, /*#__PURE__*/React.createElement("h2", {
className: "title-medium cursor-pointer group-hover:text-gray-950"
}, title)), Boolean(!hideSubtitle && subtitle) && /*#__PURE__*/React.createElement("p", {
className: "subtitle-medium mt-3 line-clamp-3 text-ellipsis group-hover:text-gray-950"
}, subtitle), /*#__PURE__*/React.createElement(ButtonLink, {
className: twMerge('mt-6 w-max', size === 'default' && "md:hidden"),
href: href,
icon: ArrowRightIcon,
iconPlacement: "right",
size: "small",
variation: "primary"
}, "Read more"))));
}