@automattic/social-previews
Version:
A suite of components to generate previews for a post for both social and search engines.
14 lines • 1.93 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { __ } from '@wordpress/i18n';
import { tumblrTitle, tumblrDescription } from './helpers';
import TumblrPostActions from './post/actions';
import TumblrPostHeader from './post/header';
import './styles.scss';
export const TumblrPostPreview = ({ title, description, image, user, url, customText, media, }) => {
const avatarUrl = user?.avatarUrl;
const mediaItem = media?.[0];
return (_jsxs("div", { className: "tumblr-preview__post", children: [avatarUrl && _jsx("img", { className: "tumblr-preview__avatar", src: avatarUrl, alt: "" }), _jsxs("div", { className: "tumblr-preview__card", children: [_jsx(TumblrPostHeader, { user: user }), _jsxs("div", { className: "tumblr-preview__body", children: [_jsx("div", { className: "tumblr-preview__title", children: tumblrTitle(title) }), customText && _jsx("div", { className: "tumblr-preview__custom-text", children: customText }), description && (_jsx("div", { className: "tumblr-preview__description", children: tumblrDescription(description) })), mediaItem ? (_jsx("div", { className: "tumblr-preview__media-item", children: mediaItem.type.startsWith('video/') ? (
// eslint-disable-next-line jsx-a11y/media-has-caption
_jsx("video", { controls: true, className: "tumblr-preview__media--video", children: _jsx("source", { src: mediaItem.url, type: mediaItem.type }) })) : (_jsx("img", { className: "tumblr-preview__image", src: mediaItem.url, alt: "" })) })) : (image && (_jsx("img", { className: "tumblr-preview__image", src: image, alt: __('Tumblr preview thumbnail', 'social-previews') }))), _jsx("a", { className: "tumblr-preview__url", href: url, target: "_blank", rel: "noreferrer", children: __('View On WordPress', 'social-previews') })] }), _jsx(TumblrPostActions, {})] })] }));
};
//# sourceMappingURL=post-preview.js.map