@automattic/social-previews/dist/cjs/instagram-preview/post-preview.js

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

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.InstagramPostPreview = InstagramPostPreview;
const jsx_runtime_1 = require("react/jsx-runtime");
const i18n_1 = require("@wordpress/i18n");
const helpers_1 = require("../helpers");
const constants_1 = require("./constants");
const bookmark_1 = require("./icons/bookmark");
const comment_1 = require("./icons/comment");
const default_avatar_1 = require("./icons/default-avatar");
const heart_1 = require("./icons/heart");
const menu_1 = require("./icons/menu");
const share_1 = require("./icons/share");
require("./style.scss");
function InstagramPostPreview({ image, media, name, profileImage, caption, }) {
    const username = name || 'username';
    const mediaItem = media?.[0];
    return ((0, jsx_runtime_1.jsx)("div", { className: "instagram-preview__wrapper", children: (0, jsx_runtime_1.jsxs)("section", { className: "instagram-preview__container", children: [(0, jsx_runtime_1.jsxs)("div", { className: "instagram-preview__header", children: [(0, jsx_runtime_1.jsx)("div", { className: "instagram-preview__header--avatar", children: profileImage ? (0, jsx_runtime_1.jsx)("img", { src: profileImage, alt: "" }) : (0, jsx_runtime_1.jsx)(default_avatar_1.DefaultAvatar, {}) }), (0, jsx_runtime_1.jsxs)("div", { className: "instagram-preview__header--profile", children: [(0, jsx_runtime_1.jsx)("div", { className: "instagram-preview__header--profile-name", children: username }), (0, jsx_runtime_1.jsx)("div", { className: "instagram-preview__header--profile-menu", children: (0, jsx_runtime_1.jsx)(menu_1.Menu, {}) })] })] }), (0, jsx_runtime_1.jsx)("div", { className: "instagram-preview__media", children: mediaItem ? ((0, jsx_runtime_1.jsx)("div", { className: "instagram-preview__media-item", children: mediaItem.type.startsWith('video/') ? (
                        // eslint-disable-next-line jsx-a11y/media-has-caption
                        (0, jsx_runtime_1.jsx)("video", { controls: false, className: "instagram-preview__media--video", children: (0, jsx_runtime_1.jsx)("source", { src: mediaItem.url, type: mediaItem.type }) })) : ((0, jsx_runtime_1.jsx)("img", { className: "instagram-preview__media--image", src: mediaItem.url, alt: "" })) })) : ((0, jsx_runtime_1.jsx)("img", { className: "instagram-preview__media--image", src: image, alt: "" })) }), (0, jsx_runtime_1.jsxs)("div", { className: "instagram-preview__content", children: [(0, jsx_runtime_1.jsxs)("section", { className: "instagram-preview__content--actions", children: [(0, jsx_runtime_1.jsxs)("div", { className: "instagram-preview__content--actions-primary", children: [(0, jsx_runtime_1.jsx)(heart_1.Heart, {}), (0, jsx_runtime_1.jsx)(comment_1.Comment, {}), (0, jsx_runtime_1.jsx)(share_1.Share, {})] }), (0, jsx_runtime_1.jsx)("div", { className: "instagram-preview__content--actions-secondary", children: (0, jsx_runtime_1.jsx)(bookmark_1.Bookmark, {}) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "instagram-preview__content--body", children: [(0, jsx_runtime_1.jsx)("div", { className: "instagram-preview__content--name", children: username }), "\u00A0", caption ? ((0, jsx_runtime_1.jsx)("div", { className: "instagram-preview__content--text", children: (0, helpers_1.preparePreviewText)(caption, {
                                        platform: 'instagram',
                                        maxChars: constants_1.FEED_TEXT_MAX_LENGTH,
                                        maxLines: constants_1.FEED_TEXT_MAX_LINES,
                                    }) })) : null] }), (0, jsx_runtime_1.jsx)("div", { className: "instagram-preview__content--footer", children: (0, jsx_runtime_1.jsx)("span", { children: (0, i18n_1.__)('View one comment', 'social-previews') }) })] })] }) }));
}
//# sourceMappingURL=post-preview.js.map