@automattic/social-previews
Version:
A suite of components to generate previews for a post for both social and search engines.
23 lines • 3.18 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { __ } from '@wordpress/i18n';
import { preparePreviewText } from '../helpers';
import { FEED_TEXT_MAX_LENGTH, FEED_TEXT_MAX_LINES } from './constants';
import { Bookmark as BookmarkIcon } from './icons/bookmark';
import { Comment as CommentIcon } from './icons/comment';
import { DefaultAvatar } from './icons/default-avatar';
import { Heart as HeartIcon } from './icons/heart';
import { Menu as MenuIcon } from './icons/menu';
import { Share as ShareIcon } from './icons/share';
import './style.scss';
export function InstagramPostPreview({ image, media, name, profileImage, caption, }) {
const username = name || 'username';
const mediaItem = media?.[0];
return (_jsx("div", { className: "instagram-preview__wrapper", children: _jsxs("section", { className: "instagram-preview__container", children: [_jsxs("div", { className: "instagram-preview__header", children: [_jsx("div", { className: "instagram-preview__header--avatar", children: profileImage ? _jsx("img", { src: profileImage, alt: "" }) : _jsx(DefaultAvatar, {}) }), _jsxs("div", { className: "instagram-preview__header--profile", children: [_jsx("div", { className: "instagram-preview__header--profile-name", children: username }), _jsx("div", { className: "instagram-preview__header--profile-menu", children: _jsx(MenuIcon, {}) })] })] }), _jsx("div", { className: "instagram-preview__media", children: mediaItem ? (_jsx("div", { className: "instagram-preview__media-item", children: mediaItem.type.startsWith('video/') ? (
// eslint-disable-next-line jsx-a11y/media-has-caption
_jsx("video", { controls: false, className: "instagram-preview__media--video", children: _jsx("source", { src: mediaItem.url, type: mediaItem.type }) })) : (_jsx("img", { className: "instagram-preview__media--image", src: mediaItem.url, alt: "" })) })) : (_jsx("img", { className: "instagram-preview__media--image", src: image, alt: "" })) }), _jsxs("div", { className: "instagram-preview__content", children: [_jsxs("section", { className: "instagram-preview__content--actions", children: [_jsxs("div", { className: "instagram-preview__content--actions-primary", children: [_jsx(HeartIcon, {}), _jsx(CommentIcon, {}), _jsx(ShareIcon, {})] }), _jsx("div", { className: "instagram-preview__content--actions-secondary", children: _jsx(BookmarkIcon, {}) })] }), _jsxs("div", { className: "instagram-preview__content--body", children: [_jsx("div", { className: "instagram-preview__content--name", children: username }), "\u00A0", caption ? (_jsx("div", { className: "instagram-preview__content--text", children: preparePreviewText(caption, {
platform: 'instagram',
maxChars: FEED_TEXT_MAX_LENGTH,
maxLines: FEED_TEXT_MAX_LINES,
}) })) : null] }), _jsx("div", { className: "instagram-preview__content--footer", children: _jsx("span", { children: __('View one comment', 'social-previews') }) })] })] }) }));
}
//# sourceMappingURL=post-preview.js.map