@automattic/social-previews
Version:
A suite of components to generate previews for a post for both social and search engines.
15 lines • 1.47 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import clsx from 'clsx';
import BlueskyPostActions from './post/actions';
import BlueskyPostBody from './post/body';
import BlueskyPostCard from './post/card';
import BlueskyPostHeader from './post/header';
import { BlueskyPostSidebar } from './post/sidebar';
import './styles.scss';
export const BlueskyPostPreview = (props) => {
const { user, media, appendUrl } = props;
return (_jsxs("div", { className: "bluesky-preview__post", children: [_jsx(BlueskyPostSidebar, { user: user }), _jsxs("div", { children: [_jsx(BlueskyPostHeader, { user: user }), _jsx(BlueskyPostBody, { ...props, appendUrl: appendUrl ?? Boolean(media?.length), children: media?.length ? (_jsx("div", { className: clsx('bluesky-preview__media', { 'as-grid': media.length > 1 }), children: media.map((mediaItem, index) => (_jsx("div", { className: "bluesky-preview__media-item", 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 })) }, `bluesky-preview__media-item-${index}`))) })) : null }), !media?.length ? _jsx(BlueskyPostCard, { ...props }) : null, _jsx(BlueskyPostActions, {})] })] }));
};
//# sourceMappingURL=post-preview.js.map