@prokodo/ui
Version:
UI components for production-grade Next.js + Headless CMS (Strapi, Contentful, Headless WordPress) websites by prokodo – built for Core Web Vitals & SEO.
160 lines (159 loc) • 6.75 kB
JavaScript
import { jsx, jsxs } from "react/jsx-runtime";
import { memo } from "react";
import { create } from "../../helpers/bem.js";
import { isString } from "../../helpers/validations.js";
import styles from "./PostWidget.module.scss.js";
import { Card } from "../card/Card.js";
import { Headline } from "../headline/Headline.js";
import { Link } from "../link/Link.js";
import { Image } from "../image/Image.js";
const bem = create(styles, "PostWidget");
const PostWidget = memo(
({
fullWidth,
className,
title,
listClassName,
contentClassName,
items = [],
...props
}) => /* @__PURE__ */ jsx(
"section",
{
itemScope: true,
className: bem(void 0, void 0, className),
itemType: "https://schema.org/ItemList",
children: /* @__PURE__ */ jsxs(
Card,
{
animated: true,
enableShadow: true,
...props,
className: bem("card__container"),
contentClassName: bem("card", void 0, contentClassName),
children: [
title && /* @__PURE__ */ jsx(
Headline,
{
highlight: true,
size: "md",
type: "h2",
...title,
className: bem("title", title == null ? void 0 : title.className),
itemProp: "headline",
variant: "secondary",
children: title == null ? void 0 : title.content
}
),
/* @__PURE__ */ jsx(
"ul",
{
className: bem(
"list",
{
"has-fullWidth": Boolean(fullWidth)
},
listClassName
),
children: items.map((item, i) => {
var _a, _b, _c, _d;
return /* @__PURE__ */ jsx(
"li",
{
itemScope: true,
itemProp: "itemListElement",
itemType: "https://schema.org/ListItem",
className: bem("list__item", {
"has-fullWidth": Boolean(fullWidth)
}),
children: /* @__PURE__ */ jsxs(
"article",
{
itemScope: true,
className: bem("list__item__content"),
itemType: "https://schema.org/BlogPosting",
children: [
(item == null ? void 0 : item.image) && /* @__PURE__ */ jsx("header", { children: /* @__PURE__ */ jsx(
Link,
{
...item == null ? void 0 : item.redirect,
"aria-label": `Read more about ${item.title.content}`,
className: bem(
"image__link",
void 0,
(_a = item == null ? void 0 : item.redirect) == null ? void 0 : _a.className
),
children: /* @__PURE__ */ jsx(
Image,
{
...item == null ? void 0 : item.image,
itemProp: "image",
className: bem(
"image",
void 0,
(_b = item == null ? void 0 : item.image) == null ? void 0 : _b.className
)
}
)
}
) }),
/* @__PURE__ */ jsxs("div", { className: bem("content"), children: [
/* @__PURE__ */ jsx(
Link,
{
...item == null ? void 0 : item.redirect,
"aria-label": `Read more about ${item.title.content}`,
children: /* @__PURE__ */ jsx(
Headline,
{
size: "sm",
type: "h3",
...item.title,
className: bem("headline", (_c = item.title) == null ? void 0 : _c.className),
itemProp: "headline",
variant: "inherit",
children: (_d = item.title) == null ? void 0 : _d.content
}
)
}
),
isString(item == null ? void 0 : item.date) && (item == null ? void 0 : item.date) !== "LL" && /* @__PURE__ */ jsx(
"p",
{
"aria-label": `Published at ${item.date}`,
className: bem("date"),
itemProp: "datePublished",
children: /* @__PURE__ */ jsx(
"time",
{
"aria-label": `Published at ${item.date}`,
className: bem("date"),
itemProp: "datePublished",
...item == null ? void 0 : item.dateProps,
children: item.date
}
)
}
)
] }),
/* @__PURE__ */ jsx("meta", { content: (i + 1).toString(), itemProp: "position" }),
isString(item == null ? void 0 : item.category) && /* @__PURE__ */ jsx("meta", { content: item.category, itemProp: "articleSection" })
]
}
)
},
`post-widget-item-${item.title}`
);
})
}
)
]
}
)
}
)
);
PostWidget.displayName = "PostWidget";
export {
PostWidget
};