@automattic/social-previews/dist/cjs/nextdoor-preview/post-preview.js

A suite of components to generate previews for a post for both social and search engines.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.NextdoorPostPreview = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const i18n_1 = require("@wordpress/i18n");
const clsx_1 = tslib_1.__importDefault(require("clsx"));
const helpers_1 = require("../helpers");
const constants_1 = require("./constants");
const footer_actions_1 = require("./footer-actions");
const chevron_icon_1 = require("./icons/chevron-icon");
const default_avatar_1 = require("./icons/default-avatar");
const default_image_1 = require("./icons/default-image");
const globe_icon_1 = require("./icons/globe-icon");
require("./style.scss");
function NextdoorPostPreview({ image, name, profileImage, description, neighborhood, media, title, url, }) {
    const hasMedia = !!media?.length;
    return ((0, jsx_runtime_1.jsx)("div", { className: "nextdoor-preview__wrapper", children: (0, jsx_runtime_1.jsx)("section", { className: `nextdoor-preview__container ${hasMedia ? 'has-media' : ''}`, children: (0, jsx_runtime_1.jsxs)("div", { className: "nextdoor-preview__content", children: [(0, jsx_runtime_1.jsxs)("div", { className: "nextdoor-preview__header", children: [(0, jsx_runtime_1.jsx)("div", { className: "nextdoor-preview__header--avatar", children: profileImage ? (0, jsx_runtime_1.jsx)("img", { src: profileImage, alt: "" }) : (0, jsx_runtime_1.jsx)(default_avatar_1.DefaultAvatar, {}) }), (0, jsx_runtime_1.jsxs)("div", { className: "nextdoor-preview__header--details", children: [(0, jsx_runtime_1.jsx)("div", { className: "nextdoor-preview__header--name", children: name || (0, i18n_1.__)('Account Name', 'social-previews') }), (0, jsx_runtime_1.jsxs)("div", { className: "nextdoor-preview__header--meta", children: [(0, jsx_runtime_1.jsx)("span", { children: neighborhood || (0, i18n_1.__)('Neighborhood', 'social-previews') }), (0, jsx_runtime_1.jsx)("span", { children: "\u2022" }), (0, jsx_runtime_1.jsx)("span", { children: (0, helpers_1.formatNextdoorDate)(Date.now()) }), (0, jsx_runtime_1.jsx)("span", { children: "\u2022" }), (0, jsx_runtime_1.jsx)(globe_icon_1.GlobeIcon, {})] })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "nextdoor-preview__body", children: [description ? ((0, jsx_runtime_1.jsx)("div", { className: "nextdoor-preview__caption", children: (0, helpers_1.preparePreviewText)(description, {
                                    platform: 'nextdoor',
                                    maxChars: constants_1.FEED_TEXT_MAX_LENGTH,
                                    maxLines: constants_1.FEED_TEXT_MAX_LINES,
                                }) })) : null, hasMedia ? ((0, jsx_runtime_1.jsx)("div", { className: "nextdoor-preview__media", children: media.map((mediaItem, index) => {
                                    return ((0, jsx_runtime_1.jsx)("div", { className: "nextdoor-preview__media-item", children: mediaItem?.type?.startsWith('video/') ? (
                                        // eslint-disable-next-line jsx-a11y/media-has-caption
                                        (0, jsx_runtime_1.jsx)("video", { controls: true, children: (0, jsx_runtime_1.jsx)("source", { src: mediaItem.url, type: mediaItem.type }) })) : ((0, jsx_runtime_1.jsx)("img", { alt: mediaItem.alt || '', src: mediaItem.url })) }, `nextdoor-preview__media-item-${index}`));
                                }) })) : null, (0, jsx_runtime_1.jsxs)("article", { className: (0, clsx_1.default)('nextdoor-preview__card', {
                                    'small-preview': !image || hasMedia,
                                }), children: [image ? ((0, jsx_runtime_1.jsx)("img", { className: "nextdoor-preview__image", src: image, alt: "" })) : ((0, jsx_runtime_1.jsx)(default_image_1.DefaultImage, {})), url ? ((0, jsx_runtime_1.jsxs)("div", { className: "nextdoor-preview__description", children: [(0, jsx_runtime_1.jsx)("h2", { className: "nextdoor-preview__description--title", children: title || (0, helpers_1.getTitleFromDescription)(description) }), (0, jsx_runtime_1.jsx)("span", { className: "nextdoor-preview__description--url", children: (0, helpers_1.baseDomain)(url) })] })) : null, hasMedia ? ((0, jsx_runtime_1.jsx)("div", { className: "nextdoor-preview__card--chevron-wrapper", children: (0, jsx_runtime_1.jsx)(chevron_icon_1.ChevronIcon, {}) })) : null] })] }), (0, jsx_runtime_1.jsx)("div", { className: "nextdoor-preview__footer", children: (0, jsx_runtime_1.jsx)(footer_actions_1.FooterActions, {}) })] }) }) }));
}
exports.NextdoorPostPreview = NextdoorPostPreview;
//# sourceMappingURL=post-preview.js.map