@hhgtech/hhg-components
Version:
Hello Health Group common components
1,261 lines (1,205 loc) • 133 kB
JavaScript
import { _ as __rest, a as __awaiter } from './tslib.es6-ea4dfe68.js';
import React__default, { useMemo, useEffect, useContext, useState, useRef, useCallback } from 'react';
import { V as VideoType } from './index-90813715.js';
import { i as isInternalLink, V as VideoItem, L as LanguageSwitcher } from './index-9fbbb35e.js';
import { a as CARE_LOCALES, b as CARE_BOOKING_LOCALES, T as TOGETHER_LOCALES, E as ECOM_LOCALES, c as VIDEO_LOCALES, S as STATIC_PAGES, L as LOCALE_SPECS } from './index-5e947517.js';
import { g as getCurrentBaseUrl, a as getCurrentSsoUrl, b as getTogetherApiDomain, c as getDiscoverApiDomain, n as normalizeLink, e as normalizeLinkSlash, d as getCareApiDomain } from './normalizeLink-593b397a.js';
import { a as formatCommunity, b as formatPost } from './dataTransform-8b19f5d4.js';
import { Close, Download } from '@hhgtech/icons/core';
import { ArrowRight, ChatAi } from '@hhgtech/icons/other';
import { createStyles, Box, Indicator, useMantineTheme } from '@mantine/core';
import { L as Logo } from './index-51f372c0.js';
import { u as useTranslations } from './index-9d21b711.js';
import throttle from 'lodash/throttle';
import { I as Input } from './index-5d405c0d.js';
import '@mantine/dates';
import { C as CommonGAssets } from './index-ebe66e27.js';
import './useMantineLocale-0c6bea99.js';
import { T as Text } from './index-9f5659e8.js';
import { B as Button$1 } from './index-c68a0fa7.js';
import './index.styles-770020ac.js';
import './translationsContext-3a9e3453.js';
import '@mantine/hooks';
import { g as getBoundariesFromMediaQueryKey, M as MediaQueries } from './utils-cb7242c7.js';
import './other-4ccb5568.js';
import './index-c2190f6e.js';
import { L as LOCALISED_SLUGS } from './constants-c2780be8.js';
import styled from '@emotion/styled';
import { u as useCSSFocusPopupHelper, N as NavigationProfileButton } from './index-d863c2b8.js';
import { u as useSSOV2Store, I as IS_SSOV2_ENABLED } from './store-994a3f4d.js';
import { B as Button } from './index-6351bdee.js';
import { i as domainLocalesMarryBaby } from './utils-40e61585.js';
import { domainLocales } from './constantsDomainLocales.js';
import { L as LOCALIZED_SLUGS } from './constants-beb49269.js';
import { theme } from './miscTheme.js';
import { H as Heading } from './index-dcc517ff.js';
import { I as Indicator$1 } from './index-e77867c5.js';
import { u as useIsInit } from './useIsInit-71d1ba8c.js';
import { setDefaultClass } from './miscDefaultClassWrapper.js';
import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime';
import { U as UserAvatar } from './index-e9423cb7.js';
import formatString from 'string-format';
import { C as Container } from './index-3a8ea352.js';
import debounce from 'lodash/debounce';
import { L as LOCALE } from './Locale-f270bd9d.js';
import { g as getDataWithCache } from './core-78466274.js';
const getEcomUrl = ({ path, locale, }) => {
var _a;
return `/shop/${(_a = LOCALISED_SLUGS[locale || 'vi-VN']) === null || _a === void 0 ? void 0 : _a[path]}/`;
};
var useStyles = createStyles(() => {
return {
root: {
textDecoration: 'none',
},
iconText: {
color: '#fff',
},
};
});
const CartBadge = (_a) => {
var { count, styles, className, classNames, locale } = _a, boxProps = __rest(_a, ["count", "styles", "className", "classNames", "locale"]);
const { classes, cx } = useStyles(undefined, {
name: 'CartBadge',
styles,
classNames,
});
return typeof count !== 'undefined' ? (React__default.createElement(Box, Object.assign({ component: "a", href: getEcomUrl({ path: 'CART', locale }), className: cx(classes.root, className) }, boxProps),
React__default.createElement(Indicator, { withBorder: true, color: 'red', size: 20, disabled: count === 0, label: React__default.createElement(Text, { className: classes.iconText, size: "s5" }, count > 99 ? '99+' : count) },
React__default.createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" },
React__default.createElement("path", { d: "M5.308 21.5q-.748 0-1.278-.53a1.74 1.74 0 0 1-.53-1.278V8.308q0-.75.53-1.278.53-.53 1.278-.53H7.5q0-1.873 1.313-3.187Q10.127 2 12 2t3.187 1.313T16.5 6.5h2.192q.749 0 1.278.53.53.53.53 1.278v11.384q0 .749-.53 1.278-.53.53-1.278.53zm0-1.5h13.384a.3.3 0 0 0 .212-.096.3.3 0 0 0 .096-.212V8.308a.3.3 0 0 0-.096-.212.3.3 0 0 0-.212-.096H5.308a.3.3 0 0 0-.212.096.3.3 0 0 0-.096.212v11.384q0 .116.096.212a.3.3 0 0 0 .212.096M9 6.5h6q0-1.25-.875-2.125A2.9 2.9 0 0 0 12 3.5q-1.25 0-2.125.875A2.9 2.9 0 0 0 9 6.5m2.985 7q1.695 0 3.047-1.148 1.35-1.148 1.335-2.606a.74.74 0 0 0-.207-.528.7.7 0 0 0-.527-.218.7.7 0 0 0-.471.182 1 1 0 0 0-.295.506 2.8 2.8 0 0 1-1.036 1.665 2.9 2.9 0 0 1-1.846.647 2.93 2.93 0 0 1-1.854-.647A2.73 2.73 0 0 1 9.1 9.688q-.086-.34-.278-.514A.66.66 0 0 0 8.367 9a.72.72 0 0 0-.534.218.72.72 0 0 0-.216.528q0 1.457 1.336 2.606 1.335 1.148 3.032 1.148", fill: "#2D87F3" }))))) : null;
};
const StyledDisplayWrapper = styled.div `
&.block-show {
display: block;
}
`;
const DisplayWrapper = ({ forceDisplay, mediaQueryKey, children, className, style, }) => {
// use CSS to display or not
const [lowerBoundValue, upperBoundValue] = useMemo(() => getBoundariesFromMediaQueryKey(mediaQueryKey), [mediaQueryKey]);
return (React__default.createElement(StyledDisplayWrapper, { lowerBound: forceDisplay ? 0 : lowerBoundValue, upperBound: forceDisplay ? 0 : upperBoundValue, className: className, style: style }, children));
};
var styles$3 = {"bookingButton":"spdlGfq","bookingButtonAnchor":"vgS16jX"};
const BookingButton = ({ onCareHeaderClick, currentUrl, careUrlFe, btnName, }) => {
return onCareHeaderClick ? (React__default.createElement(Button, { className: styles$3.bookingButton, size: "md", color: "primary", dataEventCategory: "Care", dataEventAction: "Navigation Bar Click", dataEventLabel: currentUrl, onClick: (e) => onCareHeaderClick(e), style: {
paddingLeft: 10,
paddingRight: 10,
} }, btnName)) : (React__default.createElement("a", { href: careUrlFe, className: `${styles$3.bookingButtonAnchor} care-button no-replace-click` },
React__default.createElement(Button, { className: styles$3.bookingButton, size: "md", color: "primary", dataEventCategory: "Care", dataEventAction: "Navigation Bar Click", dataEventLabel: currentUrl }, btnName)));
};
var styles$2 = {"menuContainer":"y5VJdvw","menuIcon":"oVhOSCy","menuIconWrapper":"pX8OXTM"};
const useNavConfig = ({ locale, projectType, siteType, enableBookingBtn, }) => {
const config = useMemo(() => {
const enableSearchBar = projectType === 'discover' ||
projectType === 'together' ||
projectType === 'marryBaby' ||
(projectType === 'profile' && siteType === 'marryBaby');
const enableNavCare = siteType !== 'marryBaby' &&
projectType !== 'marryBaby' &&
CARE_LOCALES.includes(locale);
const enableNavCareBooking = enableBookingBtn &&
projectType !== 'marryBaby' &&
projectType === 'discover' &&
siteType !== 'marryBaby' &&
CARE_BOOKING_LOCALES.includes(locale);
const enableNavTogether = projectType === 'marryBaby' || TOGETHER_LOCALES.includes(locale);
const enableNavDiscover = true;
const enableNavHealthTools = true;
const enableProfileMySaved = true;
const enableNavEcom = siteType !== 'marryBaby' && ECOM_LOCALES.includes(locale);
const enableProfileEcom = siteType !== 'marryBaby' && ECOM_LOCALES.includes(locale);
const enableProfileMyHealth = true;
const enableNavVideo = VIDEO_LOCALES.includes(locale);
const baseUrl = getCurrentBaseUrl(locale, siteType === 'marryBaby');
let fixBaseUrl = baseUrl;
if (typeof window !== 'undefined') {
if (fixBaseUrl.includes('//id.'))
fixBaseUrl = fixBaseUrl.replace('id.', '');
if (fixBaseUrl.includes('//staging-id.'))
fixBaseUrl = fixBaseUrl.replace('staging-id.', 'discover.');
}
const ssoUrl = getCurrentSsoUrl(locale, siteType === 'marryBaby');
const statics = (() => {
return {
HOME_PAGE_URL: fixBaseUrl,
CARE_URL_FE: `${fixBaseUrl}/care`,
TOGETHER_URL_FE: `${fixBaseUrl}/community`,
VIDEO_URL_FE: `${fixBaseUrl}/videos`,
SSO_URL: ssoUrl,
TOGETHER_API: getTogetherApiDomain(),
DISCOVER_API: getDiscoverApiDomain(locale),
};
})();
return {
enableSearchBar,
enableNavCare,
enableNavCareBooking,
enableNavTogether,
enableNavEcom,
enableProfileEcom,
enableNavVideo,
enableProfileMyHealth,
enableNavDiscover,
enableNavHealthTools,
enableProfileMySaved,
statics,
};
}, []);
return config;
};
const NavigationContext = React__default.createContext({});
const NavigationProvider = (_a) => {
var { children } = _a, props = __rest(_a, ["children"]);
const [currentUrl, setCurrentUrl] = React__default.useState(() => {
return (props.currentUrl ||
`https://${props.siteType === 'marryBaby'
? domainLocalesMarryBaby[props.locale || 'en-PH']
: domainLocales[props.locale || 'en-PH']}${props.projectType === 'together'
? '/community'
: props.projectType === 'ecom'
? '/ecom'
: props.projectType === 'care'
? '/care'
: ''}/`);
});
useEffect(() => {
const update = () => {
setCurrentUrl(window.location.href);
};
window.addEventListener('popstate', update);
update();
return () => {
window.removeEventListener('popstate', update);
};
}, []);
const configs = useNavConfig({
locale: props.locale,
projectType: props.projectType,
siteType: props.siteType,
enableBookingBtn: props.enableBookingBtn,
});
return (React__default.createElement(NavigationContext.Provider, { value: Object.assign(Object.assign({}, props), { configs: Object.assign(Object.assign({}, configs), props.configs), currentUrl: props.currentUrl || currentUrl }) }, children));
};
function ClosePopupIcon({ className }) {
return (React__default.createElement("div", null,
React__default.createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", className: className },
React__default.createElement("path", { d: "M18 6L6 18M18 18L6 6", stroke: "#3E3F58", strokeWidth: "1.3", strokeLinecap: "round" }))));
}
function HamburgerIcon({ siteType, enableSearch, className }) {
if (siteType === 'helloSites') {
return (React__default.createElement("div", null,
React__default.createElement("img", { "data-list-type": "Header", "data-content-type": "Navigation", "data-content-topic": "Hamburger", src: enableSearch
? CommonGAssets.getAssetPath('hamburgerMenuNewWithSearch.svg')
: CommonGAssets.getAssetPath('hamburgerMenuNew.svg'), style: { width: '24px', height: '24px' }, alt: "home", className: className, loading: "lazy" })));
}
/** Marry Baby */
return (React__default.createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", className: className },
React__default.createElement("path", { d: "M3.35 15a.65.65 0 0 1 .65-.65h10a.65.65 0 1 1 0 1.3H4a.65.65 0 0 1-.65-.65m0-6A.65.65 0 0 1 4 8.35h16a.65.65 0 1 1 0 1.3H4A.65.65 0 0 1 3.35 9", fill: "#3E3F58" })));
}
const StyledMasterMenuContainer = styled.div `
position: fixed;
z-index: 201;
top: calc(100% - 1px);
width: 100%;
height: calc(100vh - var(--header-bottom));
overflow-x: hidden;
overflow-y: auto;
background: white;
display: flex;
flex-direction: column;
padding-bottom: 0;
left: 0;
.hhgcomp-navigation-popupwrapper-menuwrapper {
position: unset;
}
`;
styled.div `
padding: 16px;
padding-bottom: 12px;
.fake-search-input {
pointer-events: none;
input {
line-height: 20px;
padding-top: 10px;
padding-bottom: 10px;
}
}
&[data-theme='marryBaby'] {
input {
background: ${theme.mbColors.lightGray};
border-radius: 16px;
border: none;
}
}
`;
const StyledWrapper = styled.div `
display: block;
overflow-y: auto;
flex: 1;
padding-bottom: 16px;
&::-webkit-scrollbar {
width: 0;
display: none;
}
`;
const StyleWrapperSearch = styled.div `
padding: 0 16px;
`;
const Phone = (_a) => {
var { size = 24, color = theme.colors.neutral600 } = _a, rest = __rest(_a, ["size", "color"]);
return (React__default.createElement("svg", Object.assign({ width: size, height: size, viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, rest),
React__default.createElement("path", { d: "M6.088 18.75q-.63 0-1.068-.437a1.45 1.45 0 0 1-.438-1.07V2.757q0-.63.438-1.068a1.45 1.45 0 0 1 1.068-.438h7.82q.633 0 1.07.438.437.437.437 1.068v14.488q0 .63-.437 1.069a1.45 1.45 0 0 1-1.07.437zm3.91-1.859a.7.7 0 0 0 .522-.216.7.7 0 0 0 .216-.521.7.7 0 0 0-.216-.522.7.7 0 0 0-.521-.215.7.7 0 0 0-.522.215.7.7 0 0 0-.215.522.7.7 0 0 0 .215.521.7.7 0 0 0 .522.216m-4.166-3.333h8.333V4.792H5.832z", fill: color })));
};
const StyledItemGridLeft = styled.div `
padding-right: 1rem;
background: #ffffff;
padding: 5px 15px;
${MediaQueries.mbUp} {
border-right: 1px solid #e4e8ec;
display: flex;
flex-direction: column;
justify-content: space-between;
}
`;
const StyledItem$6 = styled.a `
padding: 10px 0;
position: relative;
display: flex;
align-items: center;
&[data-is-mobile-tool='true'] {
align-items: flex-start;
.name,
.phone-icon {
margin-top: 4px;
}
}
text-decoration: none;
color: ${theme.colors.gray800};
* {
pointer-events: none;
}
.name {
font-size: 16px;
font-weight: 400;
}
&[data-theme='marryBaby']:hover,
&[data-theme='marryBaby'][data-active='true'] {
p {
color: ${theme.mbColors.pink};
}
.icon {
background-color: ${theme.mbColors.lightPink};
}
}
&[data-theme='helloSites']:hover,
&[data-theme='helloSites'][data-active='true'] {
p {
color: ${theme.colors.primaryActive};
}
}
a {
}
&[data-theme='marryBaby'] {
.icon {
display: flex;
align-items: center;
justify-content: center;
max-width: 40px;
width: 100%;
height: 40px;
border-radius: 50%;
background-color: ${theme.mbColors.lightGray};
img {
border-radius: 50%;
}
}
}
`;
const StyledHeading$1 = styled.div `
margin: 15px 0;
${MediaQueries.mbDown} {
display: none;
}
`;
const StyledIconNav = styled.div `
display: flex;
position: absolute;
right: 0;
${MediaQueries.mbUp} {
&.arrow-icon {
display: none;
}
}
`;
const StyledItemAll = styled.div `
display: flex;
align-items: center;
color: ${theme.colors.primaryBase};
font-size: ${theme.sizes.fsParagraph4};
font-weight: ${theme.sizes.fwBold};
line-height: 24px;
font-size: 14px;
font-weight: 600;
&[data-theme='marryBaby'] {
color: ${theme.mbColors.pink};
}
`;
const StyledImageWrapper = styled.div `
display: flex;
align-items: center;
margin-left: 10px;
`;
const StyledViewMore$1 = styled.a `
border: 1px solid ${theme.colors.primaryBase};
&[data-theme='marryBaby'] {
border: 1px solid ${theme.mbColors.pink};
svg path {
stroke: ${theme.mbColors.pink};
}
}
position: relative;
display: flex;
align-items: center;
justify-content: center;
padding: 6px;
border-radius: 5px;
margin-top: 20px;
${MediaQueries.mbDown} {
display: none;
}
`;
var styles$1 = {"menuIconWrapper":"wnUb-dV","menuButton":"cjbOxWe","itemNavButton":"-sx0jrx","scale":"EDlp5Zf"};
const ItemMenu = ({ item, menu }) => {
const { containerRef, onButtonMouseDown, onClose } = useCSSFocusPopupHelper({
allowBgScroll: true,
});
const isInit = useIsInit();
if (!item.popupType && item.link) {
return (React__default.createElement(NewWrapper, { isNew: item.isNew },
React__default.createElement("a", { className: `hhgcomp-navigation-itemnav-headeritem ${!isInit ? `menu-handler-${item.id}` : ''}`, tabIndex: 0, href: item.link, "data-event-category": "Hamburger Navigation", "data-event-action": "Click", "data-event-label": item.link },
React__default.createElement("div", { "data-event-category": "Hamburger Navigation", "data-event-action": "Click", "data-event-label": item.link, className: styles$1.menuButton }, item.name))));
}
return (React__default.createElement(NewWrapper, { isNew: item.isNew },
React__default.createElement("div", { ref: containerRef, className: `hhgcomp-navigation-itemnav-headeritem ${!isInit ? `menu-handler-${item.id}` : ''}`, tabIndex: 0, key: item.id, "data-event-category": "Hamburger Navigation", "data-event-action": "Click", "data-event-label": item.link },
React__default.createElement("div", { "data-event-category": "Hamburger Navigation", "data-event-action": "Click", "data-event-label": item.link, onMouseDown: onButtonMouseDown, className: styles$1.menuButton },
item.name,
item.popupType && (React__default.createElement("div", { className: styles$1.menuIconWrapper },
React__default.createElement("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none" },
React__default.createElement("path", { d: "M11.5 7.5L9 10L6.5 7.5", stroke: "#202135", strokeWidth: "1.33", strokeLinecap: "round", strokeLinejoin: "round" }))))),
React__default.isValidElement(menu)
? React__default.cloneElement(menu, {
onClose,
})
: null)));
};
const NewWrapper = ({ isNew, children, }) => {
const { t } = useTranslations();
if (isNew) {
return (React__default.createElement(Indicator$1, { color: "green", label: t('home.navigator.menuItem.new'), size: 20, styles: {
root: {
paddingRight: 10,
},
} }, children));
}
return React__default.createElement(React__default.Fragment, null, children);
};
const Categories = ({ hrefViewMore, titleBtnViewMore, UrlFE, onClosePopup, menuItems, headingTitle, activeItem, }) => {
const { siteType } = useContext(NavigationContext);
const { t } = useTranslations();
const theme = useMantineTheme();
return (React__default.createElement(StyledItemGridLeft, null,
React__default.createElement("div", null,
React__default.createElement(StyledHeading$1, null,
React__default.createElement(Heading, { tag: siteType === 'marryBaby' ? 'h5' : 'h6', as: "p", fontWeight: "semibold" }, headingTitle)), menuItems === null || menuItems === void 0 ? void 0 :
menuItems.slice(0, 6).map((item, index) => {
const href = (item === null || item === void 0 ? void 0 : item.link)
? (item === null || item === void 0 ? void 0 : item.link.startsWith('http'))
? item === null || item === void 0 ? void 0 : item.link
: `${UrlFE}/${item === null || item === void 0 ? void 0 : item.link.split('/').filter(Boolean).join('/')}/`
: '/';
return (React__default.createElement(StyledItem$6, Object.assign({ className: "iconMenu", "data-event-category": "Hamburger Navigation", "data-event-action": "Click", "data-event-label": href, "data-is-heading-category": false, "data-active": item.id && item.id === activeItem, "data-is-mobile-tool": item.isMobileAppTool, href: href }, (!isInternalLink(href) && {
target: '_blank',
}), { "data-theme": siteType, key: index, onClick: onClosePopup }),
React__default.createElement("div", { className: "icon" },
React__default.createElement("img", { loading: "lazy", alt: item.name, src: item.thumbnail || '/images/avatar.jpg', style: {
width: 32,
height: 32,
maxWidth: 32,
maxHeight: 32,
overflow: 'hidden',
} })),
React__default.createElement(NewWrapper, { isNew: item.isNew },
React__default.createElement("div", { style: {
padding: '0 0.4rem',
paddingRight: item.isNew ? 10 : 0,
} },
React__default.createElement("p", { className: "name" }, item.name),
item.isMobileAppTool && (React__default.createElement(Text, { size: "n1", color: theme.fn.primaryColor(), weight: "regular" }, t('home.calcWithApp'))))),
item.isMobileAppTool && (React__default.createElement(StyledIconNav, null,
React__default.createElement(Phone, { className: "phone-icon", size: 16 }))),
React__default.createElement(StyledIconNav, { className: "arrow-icon" },
React__default.createElement("img", { src: CommonGAssets.getAssetPath('chevronRight.svg'), style: { width: '16px', height: '16px' }, loading: "lazy" }))));
})),
titleBtnViewMore && (React__default.createElement(StyledViewMore$1, { "data-theme": siteType, style: { textDecoration: 'none' }, href: hrefViewMore, "data-event-category": "Hamburger Navigation", "data-event-action": "Click", "data-event-label": hrefViewMore },
React__default.createElement(StyledItemAll, { onClick: onClosePopup, "data-theme": siteType, "data-is-heading-category": false },
titleBtnViewMore,
React__default.createElement(StyledImageWrapper, null,
React__default.createElement("img", { className: "svg", src: siteType === 'marryBaby'
? CommonGAssets.getAssetPath('chevronRightPink.svg')
: CommonGAssets.getAssetPath('chevronRightActive.svg'), style: { width: '16px', height: '16px' }, loading: "lazy" })))))));
};
const StyledContainerItems$5 = styled.div `
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-bottom: 3.5rem;
${MediaQueries.tdDown} {
grid-template-columns: repeat(1, 1fr);
}
`;
const StyledImageCard$3 = styled.div `
height: 152px;
position: absolute;
top: 0;
left: 0;
z-index: 3;
overflow: hidden;
border-radius: 4px;
padding: 16px;
width: 100%;
.img-container {
width: 100%;
height: 100%;
}
img {
width: 100%;
height: 100%;
display: block;
object-fit: contain;
}
${MediaQueries.tdDown} {
margin-bottom: 0;
padding: 0;
height: 100%;
position: unset;
width: 150px;
}
${MediaQueries.mbDown} {
width: 80px;
}
`;
const StyledImageCardInner = styled.div `
background-color: #ffffff;
border-radius: 4px;
width: 100%;
height: 100%;
`;
const StyledBtnView$2 = styled.div `
display: flex;
margin-top: 1rem;
align-items: center;
color: ${theme.colors.primaryBase};
font-weight: 400;
font-size: 14px;
text-decoration: none;
${MediaQueries.tdDown} {
display: none;
}
`;
const StyledTitle$5 = styled.p `
font-size: 16px;
font-weight: 600;
line-height: 1.6;
color: ${theme.colors.gray800};
${MediaQueries.tdDown} {
padding: 0;
}
`;
const StyledDes$2 = styled.p `
font-size: 14px;
line-height: 1.6;
font-weight: 400;
color: ${theme.colors.gray600};
height: 40px;
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
margin-bottom: auto;
${MediaQueries.tdDown} {
height: unset;
padding: 0;
}
`;
const StyledContentWrapper$2 = setDefaultClass(styled.div `
display: flex;
flex-direction: column;
gap: 8px;
flex: 1;
z-index: 1;
${MediaQueries.tdDown} {
gap: 4px;
}
`, 'hhgcomp-navigation-menucareitem-contentwrapper');
const StyledItem$5 = styled.a `
text-decoration: none;
border-radius: 4px;
background: ${theme.colors.white};
position: relative;
overflow: hidden;
padding: 16px;
display: flex;
padding-top: 166px;
* {
pointer-events: none;
}
${MediaQueries.tdUp} {
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 0px 2px rgba(0, 0, 0, 0.06),
0px 0px 1px rgba(0, 0, 0, 0.04);
gap: 30px;
flex-direction: column;
a {
display: flex;
width: 100%;
}
}
${MediaQueries.tdDown} {
padding-top: 16px;
a {
display: none;
}
grid-template-columns: 2fr 1fr;
gap: 10px;
display: grid;
max-height: 110px;
display: flex;
flex-direction: row-reverse;
> ${StyledContentWrapper$2.classSelector} {
flex: 1;
}
img {
width: 150px;
}
}
${MediaQueries.mbDown} {
box-shadow: 0px 10px 16px rgba(0, 0, 0, 0.04),
0px 2px 8px rgba(0, 0, 0, 0.04), 0px 0px 1px rgba(0, 0, 0, 0.04);
display: flex;
flex-direction: row-reverse;
img {
width: 80px;
height: 80px;
}
}
${MediaQueries.tdOnly} {
border: 1px solid ${theme.colors.neutral100};
}
.bg-svg {
width: 100%;
max-width: 245px;
height: 100%;
top: 0;
right: -40px;
position: absolute;
display: inline-block;
}
`;
const Item$4 = ({ item, index = 0 }) => {
var _a;
const { t } = useTranslations();
const { locale, configs: { statics }, } = useContext(NavigationContext);
if (!item)
return null;
const href = `${statics.CARE_URL_FE}/${(_a = LOCALIZED_SLUGS[locale]) === null || _a === void 0 ? void 0 : _a.HOSPITAL}/${item.slug}-${item.id}`;
return (React__default.createElement(StyledItem$5, { key: item.id, href: href, "data-event-category": "Hamburger Navigation", "data-event-action": `Care Click ${index + 1}`, "data-event-label": href },
React__default.createElement("img", { src: CommonGAssets.getAssetPath('navCareCardBg.svg'), alt: "", className: "bg-svg", loading: "lazy" }),
React__default.createElement(StyledImageCard$3, null,
React__default.createElement(StyledImageCardInner, null,
React__default.createElement("img", { loading: "lazy", alt: item.name, src: item.logo || '/images/avatar.jpg' }))),
React__default.createElement(StyledContentWrapper$2, null,
React__default.createElement(StyledTitle$5, null, item.name),
React__default.createElement(StyledDes$2, null, item.description),
React__default.createElement(StyledBtnView$2, null,
t('home.seeMore'),
React__default.createElement("img", { src: CommonGAssets.getAssetPath('chevronRightActive.svg'), style: {
width: '16px',
height: '16px',
marginTop: '3px',
marginLeft: '5px',
}, loading: "lazy" })))));
};
const StyledContainerNoPosts = styled.div `
padding: 16px;
border-radius: 8px;
position: relative;
z-index: 1;
overflow: hidden;
a {
text-decoration: none;
}
.bg-svg {
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
${MediaQueries.mbDown} {
display: block;
.bg-svg {
right: -24px;
left: unset;
top: 0;
transform: rotateY(180deg);
}
}
${MediaQueries.mbUp} {
display: grid;
grid-gap: 10px;
grid-template-columns: 1fr 3fr;
}
`;
const StyledDescription = styled.div `
font-weight: 400;
font-size: 14px;
line-height: 24px;
color: ${theme.colors.gray600};
margin-bottom: 15px;
`;
const StyledTitle$4 = styled.div `
font-weight: 600;
font-size: 16px;
line-height: 26px;
color: #000000;
margin-bottom: 4px;
`;
const StyledContentLeft = styled.div `
background: #fff;
padding: 5px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50px;
`;
const StyledLeft = styled.div `
display: flex;
justify-content: center;
align-items: center;
position: relative;
${MediaQueries.mbDown} {
justify-content: end;
min-height: 100px;
}
`;
const SpotlightNoData = ({ title, link, description, cta, icon }) => {
const { siteType } = useContext(NavigationContext);
return (React__default.createElement(StyledContainerNoPosts, { "data-theme": siteType },
React__default.createElement(StyledLeft, null,
React__default.createElement("img", { src: siteType === 'marryBaby'
? CommonGAssets.getAssetPath('navMBSpotlightBgNoData.svg')
: CommonGAssets.getAssetPath('navSpotlightBgNoData.svg'), alt: "", loading: "lazy", className: "bg-svg" }),
React__default.createElement(StyledContentLeft, null, icon && React__default.createElement("img", { src: icon, width: 64, height: 64, loading: "lazy" }))),
React__default.createElement("div", null,
title && React__default.createElement(StyledTitle$4, null, title),
description && React__default.createElement(StyledDescription, null, description),
cta && (React__default.createElement("div", null,
React__default.createElement("a", { href: link },
React__default.createElement(Button, { theme: siteType, className: "survey-contact-submit", size: "md" }, cta)))))));
};
const StyledItemGridRight = styled.div `
margin-top: 10px;
background: #ffffff;
padding: 5px 15px;
position: relative;
${MediaQueries.mbDown} {
&:after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background-color: ${theme.colors.neutral100};
content: '';
}
}
`;
const StyledHeading = styled.div `
margin: 15px 0;
display: flex;
`;
const StyledViewMore = styled.a `
padding-left: 10px;
display: flex;
align-items: center;
text-decoration: none;
font-weight: 400;
font-size: 14px;
color: ${theme.colors.primaryBase};
&[data-theme='marryBaby'] {
color: ${theme.mbColors.pink};
}
img {
padding-left: 5px;
}
${MediaQueries.mbDown} {
margin-left: auto;
}
`;
const Spotlights = ({ title, viewMore, children, link, dataEventAction = '', }) => {
const { siteType } = useContext(NavigationContext);
return (React__default.createElement(StyledItemGridRight, null,
React__default.createElement(StyledHeading, null,
React__default.createElement(Heading, { tag: siteType === 'marryBaby' ? 'h5' : 'h6', as: "p", fontWeight: "semibold" }, title),
viewMore && (React__default.createElement(StyledViewMore, { "data-event-category": "Hamburger Navigation", "data-event-action": dataEventAction, "data-event-label": link, href: link, "data-theme": siteType },
viewMore,
React__default.createElement("img", { src: siteType === 'marryBaby'
? CommonGAssets.getAssetPath('chevronRightPink.svg')
: CommonGAssets.getAssetPath('chevronRightActive.svg'), style: { width: '16px', height: '16px' }, loading: "lazy" })))),
children));
};
const CareSpotlights = ({ spotlights = [], hrefViewMore }) => {
const { t } = useTranslations();
const { siteType } = useContext(NavigationContext);
return (React__default.createElement(Spotlights, { title: t('home.navigator.menu.spotlightHospitals') }, spotlights.length !== 0 ? (React__default.createElement(React__default.Fragment, null,
React__default.createElement(StyledContainerItems$5, null, spotlights === null || spotlights === void 0 ? void 0 : spotlights.slice(0, 3).map((s, index) => (React__default.createElement(Item$4, { key: index, index: index, item: s })))),
React__default.createElement("div", { style: {
position: 'absolute',
bottom: '6px',
right: '1rem',
} },
React__default.createElement("a", { href: hrefViewMore },
React__default.createElement(Button, { theme: siteType, className: "survey-contact-submit", size: "md" }, t('home.navigator.menu.care.homeButton')))))) : (React__default.createElement(SpotlightNoData, { title: t('home.navigator.menu.care.noDatas.title'), description: t('home.navigator.menu.care.noDatas.description'), link: hrefViewMore, cta: t('home.navigator.menu.care.homeButton'), icon: CommonGAssets.getAssetPath('community.svg') }))));
};
const StyledContainerItems$4 = styled.div `
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
${MediaQueries.tdDown} {
gap: 12px;
grid-template-columns: 1fr;
}
`;
const StyledItem$4 = styled.a `
width: 100%;
display: flex;
align-items: center;
text-decoration: none;
* {
pointer-events: none;
}
`;
const StyledImageCard$2 = styled.div `
border-radius: 5px;
display: block;
overflow: hidden;
padding-top: 140%;
width: 100%;
position: relative;
height: 0;
img {
position: absolute;
width: 100%;
height: 100%;
display: block;
object-fit: cover;
top: 0;
left: 0;
}
${MediaQueries.tdDown} {
width: 72px;
padding-top: 100px;
}
`;
const StyledTitle$3 = styled.p `
font-size: 16px;
font-weight: 400;
padding: 4px 15px;
line-height: 1.4;
color: ${theme.colors.gray800};
flex: 1;
${MediaQueries.tdUp} {
display: none;
}
`;
const Item$3 = ({ item, index = 0 }) => {
if (!item)
return null;
return (React__default.createElement(StyledItem$4, { key: item.id, href: item.link, "data-event-category": "Hamburger Navigation", "data-event-action": `Spotlight Click ${index + 1}`, "data-event-label": item.link },
React__default.createElement(StyledImageCard$2, null,
React__default.createElement("img", { loading: "lazy", alt: item.title, src: item.banner || '/images/notFound-min-small.jpg' })),
React__default.createElement(StyledTitle$3, null, item.title)));
};
const CategorySpotlights = ({ spotlightsList = [], hrefViewMore }) => {
const { t } = useTranslations();
const { configs: { statics }, } = useContext(NavigationContext);
return (React__default.createElement(Spotlights, { title: t('home.navigator.menu.spotlights'), viewMore: t('home.navigator.menu.spotlights.seeAll'), link: hrefViewMore, dataEventAction: "Spotlight See More Click" }, spotlightsList.length !== 0 ? (React__default.createElement(StyledContainerItems$4, null, spotlightsList === null || spotlightsList === void 0 ? void 0 : spotlightsList.slice(0, 4).map((spotlight, index) => (React__default.createElement(Item$3, { key: index, index: index, item: {
id: spotlight.id,
link: statics.HOME_PAGE_URL + spotlight.permalink,
title: spotlight.name,
banner: spotlight.image,
} }))))) : (React__default.createElement(SpotlightNoData, { title: t('home.navigator.menu.category.noDatas.title'), description: t('home.navigator.menu.category.noDatas.description'), link: hrefViewMore, cta: t('home.navigator.menu.category.noDatas.cta'), icon: CommonGAssets.getAssetPath('Spotlight.svg') }))));
};
const StyledContainerItems$3 = styled.div `
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 48px;
${MediaQueries.tdDown} {
grid-template-columns: 1fr;
grid-gap: 32px;
}
${MediaQueries.mbDown} {
grid-gap: 24px;
}
`;
const StyledContent$1 = styled.div `
padding: 5px;
flex: 1;
`;
const StyledImage = styled.img `
width: 88px;
height: 88px;
border-radius: 4px;
object-fit: cover;
`;
const StyledName = styled.div `
font-size: 12px;
font-weight: 600;
color: ${theme.colors.gray800};
text-decoration: none;
&[data-theme='marryBaby'] {
font-weight: 400;
letter-spacing: -0.2px;
}
`;
const StyledCategory = styled.div `
text-decoration: none;
font-size: 12px;
font-weight: 400;
color: ${theme.colors.primaryBase};
&[data-theme='marryBaby'] {
font-weight: 400;
letter-spacing: -0.2px;
}
`;
const StyledModifiedTime = styled.div `
font-size: 12px;
font-weight: 400;
color: ${theme.colors.gray600};
`;
const StyledDot = styled.div `
font-size: 12px;
font-weight: 400;
color: ${theme.colors.gray600};
`;
const StyledItem$3 = styled.a `
display: flex;
gap: 10px;
text-decoration: none;
position: relative;
&::after {
content: '';
display: block;
width: 100%;
height: 1px;
border-top: 1px dashed ${theme.colors.neutral100};
position: absolute;
bottom: -24px;
${MediaQueries.tdOnly} {
bottom: -16px;
}
${MediaQueries.mbDown} {
bottom: -12px;
}
}
&:last-child {
&::after {
display: none;
}
}
${MediaQueries.tdUp} {
&:nth-last-child(2) {
&::after {
display: none;
}
}
}
`;
const StyledInfoUser = styled.div `
display: flex;
gap: 10px;
vertical-align: middle;
align-items: center;
`;
const StyledTitle$2 = styled.div `
margin-top: 8px;
font-size: 16px;
font-weight: 600;
color: ${theme.colors.gray800};
&[data-theme='marryBaby'] {
margin-top: 12px;
font-weight: 400;
font-size: 14px;
line-height: 24px;
letter-spacing: -0.2px;
}
`;
const StyledInfo = styled.div `
display: flex;
flex-wrap: wrap;
align-items: center;
column-gap: 5px;
`;
const StyledWrapInfo = styled.div `
display: flex;
gap: 4px;
flex-direction: column;
`;
dayjs.extend(relativeTime);
const Item$2 = ({ post, index = 0 }) => {
var _a, _b, _c, _d, _e, _f, _g;
const { siteType, configs: { statics }, } = useContext(NavigationContext);
if (!post)
return null;
const communityUrl = [statics.TOGETHER_URL_FE, (_a = post.community) === null || _a === void 0 ? void 0 : _a.slug].join('/');
const postUrl = [communityUrl, post.slug].join('/');
const time = post.createdAt;
const cleanedTimeDate = time
? !isNaN(new Date(time).getTime())
? new Date(time)
: null
: null;
const timeText = cleanedTimeDate ? dayjs(cleanedTimeDate).toNow(true) : time;
return (React__default.createElement(StyledItem$3, { href: postUrl, "data-event-category": "Hamburger Navigation", "data-event-action": `Together Click ${index + 1}`, "data-event-label": postUrl },
React__default.createElement(StyledContent$1, null,
React__default.createElement(StyledInfoUser, null,
React__default.createElement(UserAvatar, { avatar: (_b = post.author) === null || _b === void 0 ? void 0 : _b.avatar, username: ((_c = post.author) === null || _c === void 0 ? void 0 : _c.name) || ((_d = post.author) === null || _d === void 0 ? void 0 : _d.username) }),
React__default.createElement(StyledWrapInfo, null,
React__default.createElement(StyledName, { "data-theme": siteType }, (_e = post.author) === null || _e === void 0 ? void 0 : _e.name),
React__default.createElement(StyledInfo, null,
React__default.createElement(StyledCategory, { "data-event-category": "Hamburger Navigation", "data-event-action": `Topic Click ${index + 1}`, "data-event-label": communityUrl, onClick: (e) => {
e.preventDefault();
location.href = communityUrl;
}, "data-theme": siteType }, (_f = post.community) === null || _f === void 0 ? void 0 : _f.name),
React__default.createElement(StyledDot, null, "\u2022"),
React__default.createElement(StyledModifiedTime, { "data-theme": siteType }, timeText)))),
React__default.createElement(StyledTitle$2, null, post.title)),
!!((_g = post.photos) === null || _g === void 0 ? void 0 : _g.length) && (React__default.createElement(StyledImage, { loading: "lazy", src: post.photos[0] }))));
};
const CommunitySpotlights = ({ spotlights = [] }) => {
const { configs: { statics }, } = useContext(NavigationContext);
const { t } = useTranslations();
return (React__default.createElement(Spotlights, { title: t('home.navigator.menu.trendingPosts'), viewMore: t('home.navigator.menu.trendingPosts.seeMore'), link: normalizeLink(statics.TOGETHER_URL_FE), dataEventAction: "Together See More Click" }, spotlights.length !== 0 ? (React__default.createElement(StyledContainerItems$3, null, spotlights === null || spotlights === void 0 ? void 0 : spotlights.slice(0, 4).map((p, index) => (React__default.createElement(Item$2, { index: index, post: p, key: p.id }))))) : (React__default.createElement(SpotlightNoData, { title: t('home.navigator.menu.together.noPosts.title'), description: t('home.navigator.menu.together.noPosts.description'), link: `${statics.HOME_PAGE_URL}/community/`, cta: t('home.navigator.menu.together.noPosts.cta'), icon: CommonGAssets.getAssetPath('community.svg') }))));
};
const StyledContainerItems$2 = styled.div `
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-bottom: 3.5rem;
${MediaQueries.tdDown} {
grid-template-columns: repeat(1, 1fr);
}
`;
const StyledItem$2 = styled.a `
text-decoration: none;
display: flex;
align-items: center;
`;
const Item$1 = ({ item, index = 0 }) => {
if (!item)
return null;
return (React__default.createElement(StyledItem$2, { href: item.url, "data-event-category": "Hamburger Navigation", "data-event-action": `Care Click ${index + 1}`, "data-event-label": item.url },
React__default.createElement("img", { loading: "lazy", alt: item.name, src: item.featuredImage || '/images/avatar.jpg', style: {
width: '40px',
height: '40px',
} }),
React__default.createElement(Text, { size: "p2", weight: "regular", style: {
marginLeft: 16,
} }, item.name),
React__default.createElement("img", { src: CommonGAssets.getAssetPath('chevronRightActive.svg'), style: {
width: '20px',
height: '20px',
marginLeft: 'auto',
}, loading: "lazy" })));
};
const EcomSpotlights = ({ helpfulUrls = [], }) => {
const { t } = useTranslations();
// const { siteType } = useContext(NavigationContext)
if (!helpfulUrls.length)
return null;
return (React__default.createElement(Spotlights, { title: t('home.navigator.menu.spotlightEcom') }, helpfulUrls.length !== 0 ? (React__default.createElement(StyledContainerItems$2, null, helpfulUrls === null || helpfulUrls === void 0 ? void 0 : helpfulUrls.slice(0, 5).map((s, index) => (React__default.createElement(Item$1, { key: index, index: index, item: s }))))) : (React__default.createElement(React__default.Fragment, null)
// <SpotlightNoData
// title={t('home.navigator.menu.ecom.noDatas.title')}
// description={t('home.navigator.menu.ecom.noDatas.description')}
// link={hrefViewMore}
// cta={t('home.navigator.menu.ecom.homeButton')}
// icon={CommonGAssets.getAssetPath('ecom.svg')}
// />
)));
};
const StyledContainerItems$1 = styled.div `
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
${MediaQueries.tdDown} {
grid-template-columns: 1fr;
gap: 12px;
}
`;
const AppIcon = (_a) => {
var { size = 24, color = '#2D87F3' } = _a, rest = __rest(_a, ["size", "color"]);
return (React__default.createElement("svg", Object.assign({ width: size, height: size, viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, rest),
React__default.createElement("rect", { width: "20", height: "20", rx: "4", fill: color }),
React__default.createElement("path", { d: "M9.12 6.005c0-.088-.005-.181-.012-.27-.022-.611-.623-1.071-1.208-1.046-.69.04-.839 1.007-.248 1.297.09.047.115.088.105.172v5.048c.004.064-.016.096-.077.122-.63.274-.474 1.276.233 1.304.583.03 1.16-.453 1.195-1.044q.012-.135.013-.272c0-1.77.013-3.54 0-5.311m-3.093 5.34c-.109-.048-.144-.108-.132-.232V6.117c.009-.114.103-.108.176-.165.544-.357.313-1.249-.346-1.264h-.023c-.659 0-1.172.546-1.172 1.194q-.002 2.09.004 4.177l.003 1.396c0 .62.527 1.175 1.15 1.175.68 0 .989-.978.34-1.285m7.299-1.489a.623.623 0 1 1-1.247 0 .623.623 0 0 1 1.247 0", fill: "#fff" }),
React__default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M9.927 9.821c0 1.338.925 2.46 2.162 2.743-.089 1.583-2.049 1.657-3.22 1.47a2.5 2.5 0 0 1-.716-.225 1.3 1.3 0 0 1-.614-.68c-.057-.142-.093-.293-.158-.431a.58.58 0 0 0-.674-.346.59.59 0 0 0-.462.603c.017.415.192.827.44 1.156.26.354.607.625 1.058.827.636.29 1.336.375 2.03.375.774 0 1.591-.132 2.267-.53.643-.38 1.25-.878 1.263-2.217a2.81 2.81 0 0 0 2.17-2.745c0-1.55-1.244-2.811-2.773-2.811S9.927 8.27 9.927 9.82m4.275 0c0 .841-.674 1.525-1.502 1.525a1.515 1.515 0 0 1-1.502-1.525c0-.84.674-1.525 1.502-1.525a1.516 1.516 0 0 1 1.502 1.525", fill: "#fff" })));
};
const StyledItem$1 = styled.a `
text-decoration: none;
border-radius: 4px;
background: ${theme.colors.primary50};
position: relative;
overflow: hidden;
display: flex;
* {
pointer-events: none;
}
.bg-svg {
width: 245px;
top: 0;
right: 0;
height: 100%;
position: absolute;
${MediaQueries.tdDown} {
top: calc(51% - 68px);
right: -8px;
}
}
padding: 180px 24px 16px;
a {
display: flex;
width: 100%;
}
.phone-badge {
position: absolute;
top: 16px;
left: 16px;
}
${MediaQueries.tdDown} {
padding-top: 16px;
display: flex;
align-items: center;
}
${MediaQueries.mbDown} {
.phone-badge {
display: none;
}
}
`;
const StyledImageCard$1 = styled.div `
width: 64px;
height: 64px;
background: white;
position: absolute;
right: 25px;
top: 35px;
z-index: 3;
border-radius: 50%;
img {
position: absolute;
width: 64px;
height: 64px;
top: 50%;
left: 50%;
display: block;
transform: translate(-50%, -50%);
}
${MediaQueries.tdDown} {
position: relative;
top: unset;
right: unset;
}
`;
const StyledBtnView$1 = styled.div `
display: flex;
align-items: center;
gap: 4px;
color: ${theme.colors.primaryBase};
font-weight: 400;
font-size: 14px;
text-decoration: none;
`;
const StyledTitle$1 = styled.p `
font-size: 16px;
font-weight: 600;
line-height: 1.4;
color: ${theme.colors.gray800};
`;
const StyledDes$1 = styled.p `
font-size: 14px;
line-height: 1.4;
font-weight: 400;
color: ${theme.colors.gray600};
height: 40px;
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
margin-bottom: auto;
${MediaQueries.tdDown} {
display: none;
}
`;
const StyledContentWrapper$1 = styled.div `
display: flex;
flex-direction: column;
flex: 1;
z-index: 1;
${MediaQueries.tdUp} {
gap: 8px;
}
${MediaQueries.tdDown} {
gap: 4px;
flex: 1;
}
`;
const Item = ({ item, index = 0 }) => {
const { t } = useTranslations();
const { configs: { statics }, } = useContext(NavigationContext);
if (!item)
return null;
const link = item.link
? item.link.startsWith('http')
? item.link
: `${statics.HOME_PAGE_URL}${item.link}`
: undefined;
return (React__default.createElement(StyledItem$1, { href: link, "data-event-category": "Hamburger Navigation", "data-event-action": `Engage Click ${index + 1}`, "data-event-label": link },
item.isMobileAppTool && React__default.createElement(Phone, { size: 20, className: "phone-badge" }),
React__default.createElement("img", { src: CommonGAssets.getAssetPath('navToolCardBg.svg'), alt: "", loading: "lazy", className: "bg-svg" }),
React__default.createElement(StyledContentWrapper$1, null,
React__default.createElement(StyledTitle$1, null, item.title),
React__default.createElement(StyledDes$1, null, item.subtitle),
React__default.createElement(StyledBtnView$1, null, item.isMobileAppTool ? (React__default.createElement(React__default.Fragment, null,
React__default.createElement(AppIcon, { size: 16 }),
t('home.calcWithApp'))) : (React__default.createElement(React__default.Fragment, null,
t('home.seeMore'),
React__default.createElement(ArrowRight, { size: 18, useCurrentColor: true }))))),
React__default.createElement(StyledImageCard$1, null,
React__default.createElement("img", { loading: "lazy", alt: item.title, src: item.icon || '/images/avatar.jpg' }))));
};
const StyledItem = styled.a `
text-decoration: none;
border-radius: 12px;
position: relative;
overflow: hidden;
display: flex;
* {
pointer-events: none;
}
.bg-svg {
top: 0;
left: 0;
position: absolute;
}
.dot-svg {