@prokodo/ui/dist/components/post-teaser/PostTeaser.js

UI components for production-grade Next.js + Headless CMS (Strapi, Contentful, Headless WordPress) websites by prokodo – built for Core Web Vitals & SEO.

import { jsxs, jsx } from "react/jsx-runtime";
import { memo, useState, useCallback } from "react";
import { create } from "../../helpers/bem.js";
import { calculateWordCount } from "../../helpers/calculation.js";
import { isString } from "../../helpers/validations.js";
import styles from "./PostTeaser.module.scss.js";
import { Chip } from "../chip/Chip.js";
import { Card } from "../card/Card.js";
import { Icon } from "../icon/Icon.js";
import { Image } from "../image/Image.js";
import { Headline } from "../headline/Headline.js";
import { RichText } from "../rich-text/RichText.js";
const bem = create(styles, "PostTeaser");
const PostTeaser = memo(
  ({
    className,
    image,
    readCount,
    title,
    date,
    metaDate,
    hideCategory,
    category,
    content,
    onClick,
    redirect,
    ...props
  }) => {
    var _a;
    const wordCount = calculateWordCount(content);
    const [isHovered, setIsHovered] = useState(false);
    const handleMouseEnter = useCallback(() => {
      setIsHovered(true);
    }, []);
    const handleMouseLeave = useCallback(() => {
      setIsHovered(false);
    }, []);
    return /* @__PURE__ */ jsxs(
      "article",
      {
        itemScope: true,
        className: bem(void 0, void 0, className),
        itemType: "http://schema.org/BlogPosting",
        children: [
          /* @__PURE__ */ jsxs(
            Card,
            {
              variant: "white",
              ...props,
              className: bem("card__container"),
              contentClassName: bem("card"),
              highlight: isHovered,
              redirect,
              onClick,
              onMouseEnter: handleMouseEnter,
              onMouseLeave: handleMouseLeave,
              children: [
                /* @__PURE__ */ jsxs("header", { children: [
                  isString(image == null ? void 0 : image.src) && /* @__PURE__ */ jsxs("div", { className: bem("image__wrapper"), children: [
                    /* @__PURE__ */ jsxs("div", { className: bem("meta"), children: [
                      isString(category) && hideCategory === false && /* @__PURE__ */ jsx(
                        Chip,
                        {
                          "aria-label": `Category ${category}`,
                          className: bem("meta__category"),
                          color: "primary",
                          label: category
                        }
                      ),
                      readCount !== void 0 && /* @__PURE__ */ jsx(
                        Chip,
                        {
                          "aria-label": `Read ${readCount} times`,
                          color: "white",
                          icon: /* @__PURE__ */ jsx(Icon, { name: "EyeIcon", size: "sm" }),
                          label: /* @__PURE__ */ jsxs(
                            "p",
                            {
                              itemScope: true,
                              itemProp: "interactionStatistic",
                              itemType: "https://schema.org/InteractionCounter",
                              children: [
                                /* @__PURE__ */ jsx(
                                  "meta",
                                  {
                                    content: "https://schema.org/ReadAction",
                                    itemProp: "interactionType"
                                  }
                                ),
                                /* @__PURE__ */ jsx("span", { itemProp: "userInteractionCount", children: readCount })
                              ]
                            }
                          )
                        }
                      )
                    ] }),
                    /* @__PURE__ */ jsx(
                      Image,
                      {
                        ...image,
                        captionClassName: bem("image__caption"),
                        className: bem("image"),
                        containerClassName: bem("image")
                      }
                    )
                  ] }),
                  /* @__PURE__ */ jsx(
                    Headline,
                    {
                      highlight: true,
                      size: "md",
                      type: "h3",
                      ...title,
                      className: bem("headline", title == null ? void 0 : title.className),
                      variant: (title == null ? void 0 : title.variant) ?? "secondary",
                      children: title == null ? void 0 : title.content
                    }
                  )
                ] }),
                isString(content) && /* @__PURE__ */ jsx("div", { className: bem("card__content"), itemProp: "articleBody", children: /* @__PURE__ */ jsx(RichText, { className: bem("content"), children: content }) }),
                /* @__PURE__ */ jsxs("div", { className: bem("card__footer"), children: [
                  isString(date) && /* @__PURE__ */ jsx(
                    "p",
                    {
                      "aria-label": `Published at ${date}`,
                      className: bem("date"),
                      itemProp: "datePublished",
                      children: /* @__PURE__ */ jsx("time", { dateTime: metaDate, itemProp: "datePublished", children: date })
                    }
                  ),
                  (redirect == null ? void 0 : redirect.label) !== void 0 && isString(redirect == null ? void 0 : redirect.label) && /* @__PURE__ */ jsxs(
                    "span",
                    {
                      className: bem("link", {
                        "is-hovered": isHovered
                      }),
                      children: [
                        /* @__PURE__ */ jsx(
                          Icon,
                          {
                            name: "ArrowRight01Icon",
                            size: "xs",
                            ...redirect == null ? void 0 : redirect.icon,
                            color: "primary",
                            className: bem(
                              "link__icon",
                              {
                                "is-hovered": isHovered
                              },
                              (_a = redirect == null ? void 0 : redirect.icon) == null ? void 0 : _a.className
                            )
                          }
                        ),
                        redirect.label
                      ]
                    }
                  )
                ] })
              ]
            }
          ),
          wordCount > 0 && /* @__PURE__ */ jsx("meta", { content: String(wordCount), itemProp: "wordCount" }),
          isString(category) && /* @__PURE__ */ jsx("meta", { content: category, itemProp: "articleSection" })
        ]
      }
    );
  }
);
PostTeaser.displayName = "PostTeaser";
export {
  PostTeaser
};