@automattic/social-previews
Version:
A suite of components to generate previews for a post for both social and search engines.
15 lines • 1.54 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { PORTRAIT_MODE } from '../constants';
import CustomText from './custom-text';
import useImage from './hooks/use-image-hook';
import FacebookPostActions from './post/actions';
import FacebookPostHeader from './post/header';
import './style.scss';
export const FacebookPostPreview = ({ url, user, customText, media, imageMode, }) => {
const [mode] = useImage({ mode: imageMode });
const modeClass = `is-${mode === PORTRAIT_MODE ? 'portrait' : 'landscape'}`;
return (_jsxs("div", { className: "facebook-preview__post", children: [_jsx(FacebookPostHeader, { user: user }), _jsxs("div", { className: "facebook-preview__content", children: [customText && _jsx(CustomText, { text: customText, url: url, forceUrlDisplay: true }), _jsx("div", { className: "facebook-preview__body", children: media ? (_jsx("div", { className: `facebook-preview__media ${modeClass}`, children: media.map((mediaItem, index) => (_jsx("div", { className: `facebook-preview__media-item ${modeClass}`, children: mediaItem.type.startsWith('video/') ? (
// eslint-disable-next-line jsx-a11y/media-has-caption
_jsx("video", { controls: true, children: _jsx("source", { src: mediaItem.url, type: mediaItem.type }) })) : (_jsx("img", { alt: mediaItem.alt || '', src: mediaItem.url })) }, `facebook-preview__media-item-${index}`))) })) : null })] }), _jsx(FacebookPostActions, {})] }));
};
//# sourceMappingURL=post-preview.js.map