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

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

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