@automattic/social-previews
Version:
A suite of components to generate previews for a post for both social and search engines.
28 lines • 7.65 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const i18n_1 = require("@wordpress/i18n");
const react_1 = require("react");
const icons_1 = tslib_1.__importDefault(require("../icons"));
require("./styles.scss");
const defaultAvatar = 'data:image/png;base64,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';
const FacebookPostHeader = ({ user, timeElapsed, hideOptions }) => {
const [avatarSrc, setAvatarSrc] = (0, react_1.useState)(user?.avatarUrl || defaultAvatar);
const onImageError = (0, react_1.useCallback)(() => {
if (avatarSrc !== defaultAvatar) {
setAvatarSrc(defaultAvatar);
}
}, [avatarSrc]);
return ((0, jsx_runtime_1.jsxs)("div", { className: "facebook-preview__post-header", children: [(0, jsx_runtime_1.jsxs)("div", { className: "facebook-preview__post-header-content", children: [(0, jsx_runtime_1.jsx)("img", { className: "facebook-preview__post-header-avatar", src: avatarSrc, alt: "", onError: onImageError }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: "facebook-preview__post-header-name", children: user?.displayName ||
// translators: name of a fictional Facebook User
(0, i18n_1.__)('Anonymous User', 'social-previews') }), (0, jsx_runtime_1.jsxs)("div", { className: "facebook-preview__post-header-share", children: [(0, jsx_runtime_1.jsx)("span", { className: "facebook-preview__post-header-time", children: timeElapsed
? (0, i18n_1.__)(
// translators: short version of `1 hour`
'1h', 'social-previews')
: (0, i18n_1._x)(
// translators: temporal indication of when a post was published
'Just now', '', 'social-previews') }), (0, jsx_runtime_1.jsx)("span", { className: "facebook-preview__post-header-dot", "aria-hidden": "true", children: "\u00B7" }), (0, jsx_runtime_1.jsx)(icons_1.default, { name: "public" })] })] })] }), !hideOptions && (0, jsx_runtime_1.jsx)("div", { className: "facebook-preview__post-header-more" })] }));
};
exports.default = FacebookPostHeader;
//# sourceMappingURL=index.js.map