@hhgtech/hhg-components
Version:
Hello Health Group common components
86 lines (79 loc) • 9.4 kB
JavaScript
import React__default, { memo } from 'react';
import { Bookmark } from '@hhgtech/icons/other';
import { C as CommonGAssets } from './index-ebe66e27.js';
import { T as Text } from './index-9f5659e8.js';
import { H as Heading } from './index-dcc517ff.js';
import { theme } from './miscTheme.js';
import './constantsDomainLocales.js';
import './Locale-f270bd9d.js';
import './constantsIsProduction.js';
import './tslib.es6-ea4dfe68.js';
import '@mantine/core';
import './other-4ccb5568.js';
var styles = {"expertName":"PiqKaXk","anchor":"HgbW6-m","card":"_6lkfLYy","author":"j7c-onH","pointer":"wwI1--d"};
const CardAuthor = ({ avatarImg, authorName, authorLink, uploadTime, size, }) => {
return (React__default.createElement("div", { className: styles.author },
React__default.createElement("div", { className: "author" },
React__default.createElement("div", { className: "avatar", "data-size": size }, avatarImg),
React__default.createElement("div", { className: "poster", "data-is-disabled-url": !!!authorLink },
React__default.createElement(Text, { size: size === 'lg' ? 'p3' : 'p4' },
React__default.createElement("a", { href: authorLink },
React__default.createElement("span", { className: "name" }, authorName),
"\u2022",
' '),
React__default.createElement("span", null, uploadTime))))));
};
const CardExpert = ({ isMobile, avatarImg, name, link, size = 'lg', specialty, }) => {
return (React__default.createElement("div", { className: styles.author },
React__default.createElement("div", { className: "author" },
React__default.createElement("div", { className: "expert-avatar", "data-size": size }, avatarImg),
React__default.createElement("div", { className: "expert", "data-is-disabled-url": !!!link }, isMobile ? (React__default.createElement("a", { href: link }, size === 'lg' ? (React__default.createElement(React__default.Fragment, null,
React__default.createElement(Heading, { tag: "h6", className: "expert__name", color: theme.colors.gray600 }, name),
React__default.createElement(Text, { color: theme.colors.gray500, size: "p3", className: "specialty" }, specialty))) : (React__default.createElement(React__default.Fragment, null,
React__default.createElement(Heading, { tag: "h6", className: "expert__name", color: theme.colors.gray600 }, name))))) : (React__default.createElement("a", { href: link }, size === 'lg' ? (React__default.createElement(React__default.Fragment, null,
React__default.createElement(Heading, { tag: "h6", className: "expert__name", color: theme.colors.gray600 }, name),
React__default.createElement(Text, { color: theme.colors.gray500, size: "p3", className: "specialty" }, specialty))) : (React__default.createElement(React__default.Fragment, null,
React__default.createElement("h6", { color: theme.colors.gray600, className: `${styles.expertName} expert__name` }, name),
React__default.createElement(Text, { color: theme.colors.gray500, size: "p4", className: "specialty" }, specialty)))))))));
};
const AffiliateIcon = memo(() => {
return (React__default.createElement("div", { className: "shoppable" },
React__default.createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" },
React__default.createElement("rect", { width: "24", height: "24", rx: "12", fill: "#1B3250" }),
React__default.createElement("path", { d: "M16.6667 8.00033H15.3333C15.3333 6.16033 13.84 4.66699 12 4.66699C10.16 4.66699 8.66667 6.16033 8.66667 8.00033H7.33333C6.6 8.00033 6 8.60033 6 9.33366V17.3337C6 18.067 6.6 18.667 7.33333 18.667H16.6667C17.4 18.667 18 18.067 18 17.3337V9.33366C18 8.60033 17.4 8.00033 16.6667 8.00033ZM12 6.00033C13.1067 6.00033 14 6.89366 14 8.00033H10C10 6.89366 10.8933 6.00033 12 6.00033ZM12 12.667C10.4467 12.667 9.14 11.607 8.77333 10.167C8.66 9.74699 8.98667 9.33366 9.42 9.33366C9.73333 9.33366 9.98667 9.56033 10.0733 9.86699C10.3067 10.7137 11.08 11.3337 12 11.3337C12.92 11.3337 13.6933 10.7137 13.9267 9.86699C14.0133 9.56033 14.2667 9.33366 14.58 9.33366C15.0133 9.33366 15.3333 9.74699 15.2267 10.167C14.86 11.607 13.5533 12.667 12 12.667Z", fill: "white" }))));
});
const ArticleCard = ({ articleLink, authorLink, authorName, avatarImg, banner, categoryLink, categoryName, className, dataEventActionForBanner, dataEventActionForBookmark, dataEventActionForCategory, dataEventActionForTitle, dataEventCategoryForBanner, dataEventCategoryForBookmark, dataEventCategoryForCategory, dataEventCategoryForTitle, dataEventLabelForBanner, dataEventLabelForBookmark, dataEventLabelForCategory, dataEventLabelForTitle, direction = 'horizontal', hasAffiliate, isBookmark = false, isBookmarkDisplayed = true, isMobile = true, onBookmark, onClickCategoryName, section = 'normal', size = 'md', specialty, style, styleBanner, styleLabel, styleTitle, text, title, type = 'author', uploadTime, articleLinkTarget, isPremium, headingAs, }) => {
const handleClick = (e) => {
e.stopPropagation();
onBookmark === null || onBookmark === void 0 ? void 0 : onBookmark();
};
const headingTag = size === 'lg' && type === 'expert'
? 'h4'
: size === 'lg' && section === 'home'
? isMobile
? 'h4'
: 'h3'
: size === 'lg'
? 'h4'
: 'h5';
const descriptionTag = size === 'lg' ? 'p3' : 'p4';
const categoryLabelTag = !isMobile && section === 'home' && size === 'lg' && type === 'author'
? 'c1'
: 'c2';
return (React__default.createElement("article", { className: `${styles.card} ${className || ''}`, "data-size": size, style: style, "data-direction": direction, "data-is-expert": type === 'expert' || undefined },
React__default.createElement("div", { className: "banner", style: styleBanner },
React__default.createElement("a", { className: styles.anchor, "data-event-category": dataEventCategoryForBanner, "data-event-action": dataEventActionForBanner, "data-event-label": dataEventLabelForBanner, href: articleLink || '#', target: articleLinkTarget }, banner),
isPremium && (React__default.createElement("img", { loading: "lazy", className: "premium", src: CommonGAssets.getAssetPath('premium-crown.svg') })),
hasAffiliate && React__default.createElement(AffiliateIcon, null)),
React__default.createElement("div", { className: "content" },
React__default.createElement("div", { className: "inner-content" },
React__default.createElement(Text, { style: styleLabel, className: "label", size: categoryLabelTag, weight: "caption" },
React__default.createElement("a", { className: styles.anchor, "data-event-category": dataEventCategoryForCategory, "data-event-action": dataEventActionForCategory, "data-event-label": dataEventLabelForCategory, href: categoryLink || '#', onClick: onClickCategoryName }, categoryName),
isBookmarkDisplayed && (React__default.createElement("a", { className: "bookmark", onClick: handleClick }, !isBookmark ? (React__default.createElement(Bookmark, { size: 18, "data-event-category": dataEventCategoryForBookmark, "data-event-action": dataEventActionForBookmark, "data-event-label": dataEventLabelForBookmark })) : (React__default.createElement(Bookmark, { size: 18, isActive: true, "data-event-category": dataEventCategoryForBookmark, "data-event-action": dataEventActionForBookmark, "data-event-label": dataEventLabelForBookmark, activeColor: "#2ED69E" }))))),
React__default.createElement(Heading, { tag: headingTag, style: styleTitle, className: "title", as: headingAs || (size === 'lg' ? 'h2' : 'h3') },
React__default.createElement("a", { className: styles.anchor, "data-event-category": dataEventCategoryForTitle, "data-event-action": dataEventActionForTitle, "data-event-label": dataEventLabelForTitle, href: articleLink || '#', target: articleLinkTarget }, title)),
text && (React__default.createElement("a", { href: articleLink || '#', target: articleLinkTarget },
React__default.createElement(Text, { size: descriptionTag, className: "text" }, text)))),
React__default.createElement("div", { className: "footer" }, type === 'author' ? (React__default.createElement(CardAuthor, { size: size, avatarImg: avatarImg, authorName: authorName, authorLink: authorLink, uploadTime: uploadTime, handleClick: handleClick, isBookmarked: isBookmark, dataEventCategoryForBookmark: dataEventCategoryForBookmark, dataEventActionForBookmark: dataEventActionForBookmark, dataEventLabelForBookmark: dataEventLabelForBookmark })) : (React__default.createElement(CardExpert, { size: size, isMobile: isMobile, avatarImg: avatarImg, specialty: specialty, name: authorName, link: authorLink, handleClick: handleClick, isBookmarked: isBookmark, dataEventCategoryForBookmark: dataEventCategoryForBookmark, dataEventActionForBookmark: dataEventActionForBookmark, dataEventLabelForBookmark: dataEventLabelForBookmark }))))));
};
export { ArticleCard };