@prezly/theme-kit-ui
Version:
UI components for Prezly themes
59 lines • 2.51 kB
JavaScript
import React from "react";
import Link from 'next/link';
import { twMerge } from 'tailwind-merge';
import { CategoriesList } from "../CategoriesList/index.mjs";
import { StoryPublicationDate } from "../StoryPublicationDate/index.mjs";
import { StoryImage } from "./components/index.mjs";
export 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.createElement("div", {
className: 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.createElement(Link, {
className: 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.createElement(StoryImage, {
className: "cursor-pointer",
logo: logo,
newsroomName: newsroomName,
placeholderClassName: "",
size: size,
story: story
})), /*#__PURE__*/React.createElement("div", {
className: 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.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, {
locale: locale,
dateFormat: dateFormat
})), 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: twMerge('cursor-pointer', size === 'large' ? 'title-small ' : 'title-xx-small', 'group-hover:text-gray-950')
}, title)), Boolean(showSubtitle && subtitle) && /*#__PURE__*/React.createElement("p", {
className: 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))));
}