UNPKG

@automattic/social-previews

Version:

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

19 lines 2.46 kB
"use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.TumblrPostPreview = void 0; const tslib_1 = require("tslib"); const jsx_runtime_1 = require("react/jsx-runtime"); const i18n_1 = require("@wordpress/i18n"); const helpers_1 = require("./helpers"); const actions_1 = tslib_1.__importDefault(require("./post/actions")); const header_1 = tslib_1.__importDefault(require("./post/header")); require("./styles.scss"); const TumblrPostPreview = ({ title, description, image, user, url, customText, media, }) => { const avatarUrl = user?.avatarUrl; const mediaItem = media?.[0]; return ((0, jsx_runtime_1.jsxs)("div", { className: "tumblr-preview__post", children: [avatarUrl && (0, jsx_runtime_1.jsx)("img", { className: "tumblr-preview__avatar", src: avatarUrl, alt: "" }), (0, jsx_runtime_1.jsxs)("div", { className: "tumblr-preview__card", children: [(0, jsx_runtime_1.jsx)(header_1.default, { user: user }), (0, jsx_runtime_1.jsxs)("div", { className: "tumblr-preview__body", children: [(0, jsx_runtime_1.jsx)("div", { className: "tumblr-preview__title", children: (0, helpers_1.tumblrTitle)(title) }), customText && (0, jsx_runtime_1.jsx)("div", { className: "tumblr-preview__custom-text", children: customText }), description && ((0, jsx_runtime_1.jsx)("div", { className: "tumblr-preview__description", children: (0, helpers_1.tumblrDescription)(description) })), mediaItem ? ((0, jsx_runtime_1.jsx)("div", { className: "tumblr-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, className: "tumblr-preview__media--video", children: (0, jsx_runtime_1.jsx)("source", { src: mediaItem.url, type: mediaItem.type }) })) : ((0, jsx_runtime_1.jsx)("img", { className: "tumblr-preview__image", src: mediaItem.url, alt: "" })) })) : (image && ((0, jsx_runtime_1.jsx)("img", { className: "tumblr-preview__image", src: image, alt: (0, i18n_1.__)('Tumblr preview thumbnail', 'social-previews') }))), (0, jsx_runtime_1.jsx)("a", { className: "tumblr-preview__url", href: url, target: "_blank", rel: "noreferrer", children: (0, i18n_1.__)('View On WordPress', 'social-previews') })] }), (0, jsx_runtime_1.jsx)(actions_1.default, {})] })] })); }; exports.TumblrPostPreview = TumblrPostPreview; //# sourceMappingURL=post-preview.js.map