@automattic/social-previews
Version:
A suite of components to generate previews for a post for both social and search engines.
12 lines • 1.62 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { __ } from '@wordpress/i18n';
import { baseDomain } from '../helpers';
import { tumblrTitle, tumblrDescription } from './helpers';
import TumblrPostActions from './post/actions';
import TumblrPostHeader from './post/header';
import './styles.scss';
export const TumblrLinkPreview = ({ title, description, image, user, url, }) => {
const avatarUrl = user?.avatarUrl;
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__window", children: [image && (_jsxs("div", { className: "tumblr-preview__window-top", children: [_jsx("div", { className: "tumblr-preview__overlay", children: _jsx("div", { className: "tumblr-preview__title", children: tumblrTitle(title) }) }), _jsx("img", { className: "tumblr-preview__image", src: image, alt: __('Tumblr preview thumbnail', 'social-previews') })] })), _jsxs("div", { className: `tumblr-preview__window-bottom ${!image ? 'is-full' : ''}`, children: [!image && _jsx("div", { className: "tumblr-preview__title", children: tumblrTitle(title) }), description && image && (_jsx("div", { className: "tumblr-preview__description", children: tumblrDescription(description) })), url && _jsx("div", { className: "tumblr-preview__site-name", children: baseDomain(url) })] })] }), _jsx(TumblrPostActions, {})] })] }));
};
//# sourceMappingURL=link-preview.js.map