@hhgtech/hhg-components
Version:
Hello Health Group common components
173 lines (167 loc) • 11.7 kB
JavaScript
import { _ as __rest } from './tslib.es6-ea4dfe68.js';
import React__default, { useMemo } from 'react';
import { Card, Group, Box, Flex, createStyles } from '@mantine/core';
import innertext from 'innertext';
import { A as Anchor, a as Avatar, b as AspectRatio } from './index-5d405c0d.js';
import '@mantine/dates';
import './index-5e947517.js';
import './index-90813715.js';
import './index-ebe66e27.js';
import './useMantineLocale-0c6bea99.js';
import { T as Text } from './index-9f5659e8.js';
import './index-c68a0fa7.js';
import './index.styles-770020ac.js';
import './translationsContext-3a9e3453.js';
import '@mantine/hooks';
import './utils-cb7242c7.js';
import './other-4ccb5568.js';
import './index-c2190f6e.js';
import { u as useScreenSize } from './useScreenSize-981e5b51.js';
import '@hhgtech/icons/other';
import '@emotion/styled';
import '@mantine/carousel';
import './miscTheme.js';
import './Locale-f270bd9d.js';
import 'classnames';
import './useUniqueId-4305c9aa.js';
import './constantsSite.js';
import '@hhgtech/icons/core';
import 'date-fns/locale';
import './constantsDomainLocales.js';
import './constantsRiskScreener.js';
import './constantsIsProduction.js';
import '@mantine/notifications';
import 'dayjs';
const _Horizontal = (_a) => {
var _b, _c, _d;
var { article, author, authorAvatar, badge = '', hideDescription = false, isBookmarked = false, onBookmark, time, tracking } = _a,
// size = 'lg',
rest = __rest(_a, ["article", "author", "authorAvatar", "badge", "hideDescription", "isBookmarked", "onBookmark", "time", "tracking"]);
const { isMobile } = useScreenSize();
console.log({ article });
// const maw = useMemo(() => {
// switch (size) {
// case 'lg':
// return 648
// case 'md':
// return 456
// case 'sm':
// return 264
// default:
// return 648
// }
// }, [size])
return (React__default.createElement(Card, Object.assign({ padding: 0, radius: 0,
// maw={maw}
sx: {
display: 'flex',
flexDirection: 'row',
gap: 24,
} }, rest),
React__default.createElement(Card.Section, { w: "100%", h: "100%", miw: 264, m: 0, className: "pointer" },
React__default.createElement("img", { src: (isMobile ? article.featureImageMobile : article.featureImage) ||
article.featureImage, alt: article.postName, style: {
width: '100%',
}, loading: "lazy" })),
React__default.createElement(Card.Section, null,
React__default.createElement(Group, { position: "apart", mt: 16, mb: 4 },
React__default.createElement(Anchor, { href: ((_b = article === null || article === void 0 ? void 0 : article.primaryCategory) === null || _b === void 0 ? void 0 : _b.permalink) || '#' },
React__default.createElement(Text, { size: "p4", color: "blue.6" }, (_c = article === null || article === void 0 ? void 0 : article.primaryCategory) === null || _c === void 0 ? void 0 : _c.displayName)),
React__default.createElement(Box, { sx: { cursor: 'pointer' }, role: "button", onClick: onBookmark }, !isBookmarked ? (React__default.createElement("svg", Object.assign({ width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, tracking === null || tracking === void 0 ? void 0 : tracking.bookmark),
React__default.createElement("path", { d: "M7 17.95L12 15.8L17 17.95V5.3C17 5.23333 16.9667 5.16667 16.9 5.1C16.8333 5.03333 16.7667 5 16.7 5H7.3C7.23333 5 7.16667 5.03333 7.1 5.1C7.03333 5.16667 7 5.23333 7 5.3V17.95ZM6.775 19.7C6.475 19.8333 6.18733 19.8123 5.912 19.637C5.63733 19.4623 5.5 19.2083 5.5 18.875V5.3C5.5 4.8 5.675 4.375 6.025 4.025C6.375 3.675 6.8 3.5 7.3 3.5H16.7C17.2 3.5 17.625 3.675 17.975 4.025C18.325 4.375 18.5 4.8 18.5 5.3V18.875C18.5 19.2083 18.3623 19.4623 18.087 19.637C17.8123 19.8123 17.525 19.8333 17.225 19.7L12 17.45L6.775 19.7ZM7 5H17H12H7Z", fill: "#595959" }))) : (React__default.createElement("svg", Object.assign({ width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, tracking === null || tracking === void 0 ? void 0 : tracking.bookmark),
React__default.createElement("path", { d: "M6.775 19.7C6.475 19.8333 6.18733 19.8123 5.912 19.637C5.63733 19.4623 5.5 19.2083 5.5 18.875V5.3C5.5 4.8 5.675 4.375 6.025 4.025C6.375 3.675 6.8 3.5 7.3 3.5H16.7C17.2 3.5 17.625 3.675 17.975 4.025C18.325 4.375 18.5 4.8 18.5 5.3V18.875C18.5 19.2083 18.3623 19.4623 18.087 19.637C17.8123 19.8123 17.525 19.8333 17.225 19.7L12 17.45L6.775 19.7Z", fill: "#595959" }))))),
React__default.createElement(Text, { size: hideDescription ? 's2' : 's1', mb: 8, weight: "semiBold", className: "pointer" }, article.postTitle || article.postName || ''),
!hideDescription && (React__default.createElement(Text, { size: "p2", mb: 16, lineClamp: 3, className: "pointer" }, innertext(article.excerpt ||
article.description ||
((_d = article.postContent) === null || _d === void 0 ? void 0 : _d.split('\r\n')[0]) ||
''))),
React__default.createElement(Flex, { gap: 12, align: 'center' },
React__default.createElement(Avatar, { size: 32, src: authorAvatar, withIndicator: true, indicatorConfig: {
offset: 5,
size: 18,
label: React__default.createElement("img", { loading: "lazy", src: badge, alt: "" }),
} }, "A"),
React__default.createElement(Text, { size: "n1", c: "gray.6" },
author,
" \u2022 ",
time)))));
};
// MyComponent.styles.ts
// eslint-disable-next-line @typescript-eslint/no-unused-vars
var useStyles = createStyles((_theme, {}) => ({
// add all styles as usual
root: {},
image: {},
title: {},
category: {},
description: {},
author: {},
}));
const RATIO = {
DEFAULT: 648 / 440,
NO_DESCRIPTION: 456 / 304,
};
const _Vertical = (_a) => {
var _b, _c, _d;
var { article, author, authorAvatar, badge = '', bannerImageWrapProps, hideDescription = false, isBookmarked = false, onBookmark, time, tracking,
// size = 'lg',
classNames, styles, unstyled, className } = _a, rest = __rest(_a, ["article", "author", "authorAvatar", "badge", "bannerImageWrapProps", "hideDescription", "isBookmarked", "onBookmark", "time", "tracking", "classNames", "styles", "unstyled", "className"]);
const { isMobile } = useScreenSize();
const { classes, cx } = useStyles(
// First argument of useStyles is styles params
{},
// Second argument is responsible for styles api integration
{ name: 'ArticleCard', classNames, styles, unstyled });
const type = useMemo(() => {
if (hideDescription) {
return RATIO.NO_DESCRIPTION;
}
else {
return RATIO.DEFAULT;
}
}, [hideDescription]);
// const maw = useMemo(() => {
// switch (size) {
// case 'lg':
// return 648
// case 'md':
// return 456
// case 'sm':
// return 264
// default:
// return 648
// }
// }, [size])
return (React__default.createElement(Card, Object.assign({ className: cx(classes.root, className), padding: 'lg', radius: 0 }, rest),
React__default.createElement(Card.Section, { className: cx(classes.image, 'pointer') },
React__default.createElement(AspectRatio, Object.assign({ ratio: type }, bannerImageWrapProps),
React__default.createElement("img", { src: (isMobile ? article.featureImageMobile : article.featureImage) ||
article.featureImage, alt: article.postName, style: { objectFit: 'cover' } }))),
React__default.createElement(Card.Section, null,
React__default.createElement(Group, { position: "apart", mt: 16, mb: 4 },
React__default.createElement(Anchor, { className: classes.category, href: ((_b = article === null || article === void 0 ? void 0 : article.primaryCategory) === null || _b === void 0 ? void 0 : _b.permalink) || '#' },
React__default.createElement(Text, { size: "p4", color: "blue.6" }, (_c = article === null || article === void 0 ? void 0 : article.primaryCategory) === null || _c === void 0 ? void 0 : _c.displayName)),
React__default.createElement(Box, { sx: { cursor: 'pointer' }, role: "button", onClick: onBookmark }, !isBookmarked ? (React__default.createElement("svg", Object.assign({ width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, tracking === null || tracking === void 0 ? void 0 : tracking.bookmark),
React__default.createElement("path", { d: "M7 17.95L12 15.8L17 17.95V5.3C17 5.23333 16.9667 5.16667 16.9 5.1C16.8333 5.03333 16.7667 5 16.7 5H7.3C7.23333 5 7.16667 5.03333 7.1 5.1C7.03333 5.16667 7 5.23333 7 5.3V17.95ZM6.775 19.7C6.475 19.8333 6.18733 19.8123 5.912 19.637C5.63733 19.4623 5.5 19.2083 5.5 18.875V5.3C5.5 4.8 5.675 4.375 6.025 4.025C6.375 3.675 6.8 3.5 7.3 3.5H16.7C17.2 3.5 17.625 3.675 17.975 4.025C18.325 4.375 18.5 4.8 18.5 5.3V18.875C18.5 19.2083 18.3623 19.4623 18.087 19.637C17.8123 19.8123 17.525 19.8333 17.225 19.7L12 17.45L6.775 19.7ZM7 5H17H12H7Z", fill: "#595959" }))) : (React__default.createElement("svg", Object.assign({ width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, tracking === null || tracking === void 0 ? void 0 : tracking.bookmark),
React__default.createElement("path", { d: "M6.775 19.7C6.475 19.8333 6.18733 19.8123 5.912 19.637C5.63733 19.4623 5.5 19.2083 5.5 18.875V5.3C5.5 4.8 5.675 4.375 6.025 4.025C6.375 3.675 6.8 3.5 7.3 3.5H16.7C17.2 3.5 17.625 3.675 17.975 4.025C18.325 4.375 18.5 4.8 18.5 5.3V18.875C18.5 19.2083 18.3623 19.4623 18.087 19.637C17.8123 19.8123 17.525 19.8333 17.225 19.7L12 17.45L6.775 19.7Z", fill: "#595959" }))))),
React__default.createElement(Text, { className: cx(classes.title, 'pointer'), size: hideDescription ? 's2' : 's1', mb: 8, weight: "semiBold" }, article.postTitle || article.postName || ''),
!hideDescription && (React__default.createElement(Text, { className: cx(classes.description, 'pointer'), size: "p2", mb: 16, lineClamp: 3 }, innertext(article.excerpt ||
article.description ||
((_d = article.postContent) === null || _d === void 0 ? void 0 : _d.split('\r\n')[0]) ||
''))),
React__default.createElement(Flex, { className: classes.author, gap: 12, align: 'center' },
React__default.createElement(Avatar, { size: 32, src: authorAvatar, withIndicator: true, indicatorConfig: {
offset: 5,
size: 18,
label: React__default.createElement("img", { loading: "lazy", src: badge, alt: "" }),
} }, "A"),
React__default.createElement(Text, { size: "n1", c: "gray.6" },
author,
" \u2022 ",
time)))));
};
const ArticleCard = (_a) => {
var { variant = 'vertical' } = _a, rest = __rest(_a, ["variant"]);
return variant === 'horizontal' ? (React__default.createElement(_Horizontal, Object.assign({}, rest))) : (React__default.createElement(_Vertical, Object.assign({}, rest)));
};
export { ArticleCard };