@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
JavaScript
;
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