@hhgtech/hhg-components
Version:
Hello Health Group common components
1,135 lines (1,078 loc) • 180 kB
JavaScript
import { _ as __rest, a as __awaiter } from './tslib.es6-00ab44b2.js';
import * as React from 'react';
import React__default, { useContext, useState, useCallback, useMemo, useEffect, useRef } from 'react';
import { i as isInternalLink, V as VideoItem, S as SiteWideBanner, L as LanguageSwitcher } from './SiteWideBanner-04729b10.js';
import { L as LOCALE_SPECS, S as STATIC_PAGES, a as ZINDEX_HEADER, V as VIDEO_LOCALES, c as LOCALE_HAS_COMMUNITY_SITE, C as CARE_LOCALES } from './index-8c40504a.js';
import { e as normalizeLink, n as normalizeLinkSlash, g as getCurrentBaseUrl, c as getDiscoverApiDomain, b as getTogetherApiDomain, d as getCareApiDomain } from './normalizeLink-c3e1dac7.js';
import { f as formatCommunity, a as formatPost } from './dataTransform-60f9d527.js';
import { Close, Logo } from '@hhgtech/icons/core';
import { I as Input, D as DEBOUNCED_TIME } from './index-bd44bcb2.js';
import './translationsContext-18f7b7e0.js';
import { L as LOCALE } from './Locale-dc1237b9.js';
import { keyframes } from '@emotion/react';
import styled from '@emotion/styled';
import { theme } from './miscTheme.js';
import { a as NavigationContext, u as useCSSFocusPopupHelper, N as NavigationProfileButton, b as NavigationProvider } from './index-cb544015.js';
import { ArrowRight, ChatAi } from '@hhgtech/icons/other';
import { createStyles, Box, Indicator, useMantineTheme, clsx, Flex } from '@mantine/core';
import { L as Logo$1 } from './index-4ee3cd67.js';
import throttle from 'lodash/throttle';
import '@mantine/dates';
import { V as VideoType } from './index-fe4471f4.js';
import { C as CommonGAssets } from './index-7adf994c.js';
import './index-3f09210d.js';
import { T as Text } from './index-0b67696c.js';
import { B as Button } from './index-2d25b0f0.js';
import './index-17c85f76.js';
import './index.styles-3adef5f6.js';
import '@mantine/hooks';
import { g as getBoundariesFromMediaQueryKey, M as MediaQueries } from './utils-538169b3.js';
import './index-04505e35.js';
import { L as LOCALISED_SLUGS, C as CARE_BASE_PATH } from './constants-7c1bcc81.js';
import { u as useSSOV2Store, I as IS_SSOV2_ENABLED } from './store-5b85d43f.js';
import { L as LOCALISED_SLUGS$1 } from './constants-367949ba.js';
import { I as Indicator$1 } from './index-08e49d42.js';
import { u as useTranslations } from './index-09d9e570.js';
import { u as useIsInit, a as useCartCareService } from './useCartCareService-778483c9.js';
import { L as LOCALIZED_SLUGS } from './constants-ce67620e.js';
import { setDefaultClass } from './miscDefaultClassWrapper.js';
import { B as Button$1 } from './index-67429eb2.js';
import { H as Heading } from './index-e348d0b2.js';
import { a as getCareSearchUrl, h as hexToRgb, r as rgbToHsb, b as hsbToRgb, f as formatCategory, c as formatSpotlightsList, d as checkAvailableSpotlight, e as formatHealthTool, i as formatVideoItem, j as formatSpecialties, k as formatHospital } from './utils-cf2f413d.js';
import { C as Container } from './index-f0dc4a09.js';
import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime';
import { U as UserAvatar } from './index-a6a9fbc0.js';
import get from 'lodash/get';
import { Z as Z_INDEX, D as DEFAULT_HEADER_HEIGHT_MOBILE, a as DEFAULT_HEADER_HEIGHT_DESKTOP } from './constants-a21536f3.js';
import isEmpty from 'lodash/isEmpty';
import { C as CartCareButton } from './index-71f98af8.js';
import debounce from 'lodash/debounce';
import { domainLocales } from './constantsDomainLocales.js';
import { g as getDataWithCache } from './core-536071a4.js';
const HamburgerWhite = (props) => (React.createElement("svg", Object.assign({ width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
React.createElement("path", { d: "M4 12H20", stroke: "white", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
React.createElement("path", { d: "M4 7H20", stroke: "white", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
React.createElement("path", { d: "M4 17H20", stroke: "white", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })));
const StarPair = (props) => (React.createElement("svg", Object.assign({ width: "22", height: "28", viewBox: "0 0 22 28", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
React.createElement("path", { d: "M6.35278 10.7516C6.42759 10.976 6.63881 11.1279 6.87534 11.1279C7.11187 11.1279 7.322 10.976 7.39791 10.7516C7.68947 9.87691 8.37585 9.19053 9.25054 8.89896C9.47497 8.82415 9.62679 8.61403 9.62679 8.3775C9.62679 8.14097 9.47497 7.93084 9.25054 7.85603C8.37585 7.56446 7.68947 6.87809 7.39791 6.00339C7.24719 5.55453 6.5046 5.55453 6.35388 6.00339C6.06231 6.87809 5.37594 7.56446 4.50125 7.85603C4.27682 7.93084 4.125 8.14097 4.125 8.3775C4.125 8.61403 4.27682 8.82415 4.50125 8.89896C5.37565 9.19043 6.06193 9.87699 6.35278 10.7516Z", fill: "#2743AD" }),
React.createElement("path", { d: "M20.1723 14.3286L18.5342 13.6789C16.821 12.9995 15.4655 11.6411 14.7897 9.92641L14.1396 8.27697C13.9232 7.72994 13.0262 7.72994 12.8097 8.27697L12.1597 9.92641C11.4839 11.6411 10.1284 12.9995 8.41517 13.6789L6.77705 14.3286C6.5044 14.4367 6.32422 14.7016 6.32422 14.9952C6.32422 15.2888 6.50345 15.5537 6.77705 15.6618L8.41517 16.3115C10.1284 16.991 11.4839 18.3494 12.1597 20.064L12.8097 21.7135C12.9175 21.987 13.1815 22.1668 13.4742 22.1668C13.7669 22.1668 14.031 21.987 14.1387 21.7135L14.7888 20.064C15.4646 18.3494 16.8201 16.991 18.5333 16.3115L20.1714 15.6618C20.444 15.5537 20.6242 15.2888 20.6242 14.9952C20.6242 14.7016 20.4459 14.4367 20.1723 14.3286Z", fill: "#2743AD" })));
const ALLOW_SHOW_SEARCH_ANIMATION = [LOCALE.Vietnam, LOCALE.Malaysia];
const TEXT_PLACEHOLDER_INPUT = {
[LOCALE.Vietnam]: [
'navigation.search.input.placeholder.animation.authenticProducts',
'navigation.search.input.placeholder.animation.findNearestClinic',
'navigation.search.input.placeholder.animation.reputableFacilities',
'navigation.search.input.placeholder.animation.fullRefundWithin10DayCancellation',
'navigation.search.input.placeholder.animation.freeDoctorConsultation',
],
[LOCALE.Malaysia]: [
'navigation.search.input.placeholder.animation.authenticProducts',
'navigation.search.input.placeholder.animation.findNearestClinic',
'navigation.search.input.placeholder.animation.reputableFacilities',
'navigation.search.input.placeholder.animation.freeConsultation',
'navigation.search.input.placeholder.animation.chatWithDoctorOnPlatform',
],
};
const TIME_ANIMATION_SEARCH_INPUT = 5000;
const TIME_ANIMATION_SEARCH_INPUT_DELAY = TIME_ANIMATION_SEARCH_INPUT - 2000;
const StyleInput = styled(Input) `
position: relative;
z-index: 0;
.mantine-Input-input {
border-radius: 40px;
background: ${theme.colors.white};
border: 1px solid ${theme.colors.blue200};
&:focus {
border: 1px solid ${theme.colors.primaryBase};
}
}
.close-icon-wrapper {
display: flex;
background-color: ${theme.colors.gray400};
border-radius: 100%;
cursor: pointer;
svg {
pointer-events: none;
}
}
.search-icon-btn {
display: flex;
justify-content: center;
align-items: center;
}
`;
const StyleSearchInputAnimationWrapper = styled.div `
z-index: 1;
width: 100%;
height: 100%;
pointer-events: none;
& > * {
pointer-events: none;
}
&[hidden='true'] {
display: none;
}
&[hidden='false'] {
display: block;
}
`;
const textRevealAnimation = keyframes `
0% {
left: 0;
}
100% {
left: 100%;
}
`;
const StyledTextAnimationWrapper = styled.div `
position: absolute;
top: 50%;
left: 0;
transform: translate(42px, -50%);
width: calc(
100% - 42px - 42px
); // minus the left and right padding of the input
`;
const StyleSearchInputWrapper = styled.div `
position: relative;
`;
const StyledTextAnimation = styled.p `
font-size: 13px;
color: ${theme.colors.gray400};
line-height: 20px;
letter-spacing: -0.3px;
font-weight: 500;
position: relative;
display: block;
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
user-select: none;
&::before {
position: absolute;
top: 0;
left: 0;
content: '';
display: block;
width: 100%;
height: 100%;
background-color: ${theme.colors.white};
animation: ${textRevealAnimation} ${TIME_ANIMATION_SEARCH_INPUT_DELAY}ms
linear forwards;
}
`;
const HHG_SEARCH_BACK_KEY = 'hhg_search_history';
const SearchInput = ({ id, isMobile = false, isHomepage = false, projectType, isRedirectSearchPage = false, }) => {
const { locale, siteType, isWinCashBackTheme: winCashBackTheme, } = useContext(NavigationContext);
const [keyword, setKeyword] = useState('');
const [isFocused, setIsFocused] = useState(false);
const [eventCategoryTracking, setEventCategoryTracking] = useState('Search From Another Page');
const [currentTextIndex, setCurrentTextIndex] = useState(0);
const { t } = useTranslations();
const goToSearchPage = useCallback((searchValue = '') => {
let sourceParam = '';
if (projectType === 'together') {
sourceParam = 'community';
}
if (projectType === 'discover') {
if (window.location.pathname.startsWith('/health-tools/')) {
sourceParam = 'health-tools';
}
else {
sourceParam = projectType;
}
}
localStorage.setItem(HHG_SEARCH_BACK_KEY, window.location.href);
const searchParams = new URLSearchParams(window.location.search);
searchParams.set('source', sourceParam);
searchParams.set('s', searchValue);
searchParams.delete('page');
window.location.href = `/search/?${searchParams.toString()}`;
}, [projectType]);
const debouncedTime = useMemo(() => {
return ALLOW_SHOW_SEARCH_ANIMATION.includes(locale)
? 0
: DEBOUNCED_TIME;
}, [locale]);
const goBack = useCallback(() => {
const historyBackUrl = localStorage.getItem(HHG_SEARCH_BACK_KEY);
if (!historyBackUrl) {
goToSearchPage('');
return;
}
localStorage.removeItem(HHG_SEARCH_BACK_KEY);
window.location.href = historyBackUrl;
}, [goToSearchPage]);
useEffect(() => {
if (typeof window !== 'undefined') {
const url = new URL(window.location.href);
const params = new URLSearchParams(url.search);
const searchValue = params.get('s');
if (projectType === 'discover' &&
window.location.pathname.startsWith('/search/')) {
setEventCategoryTracking('Search Page');
}
setKeyword(searchValue);
}
}, []);
useEffect(() => {
if (!keyword && ALLOW_SHOW_SEARCH_ANIMATION.includes(locale)) {
const texts = TEXT_PLACEHOLDER_INPUT[locale];
if (texts && texts.length > 0) {
setCurrentTextIndex(0);
const interval = setInterval(() => {
setCurrentTextIndex((prevIndex) => (prevIndex + 1) % texts.length);
}, TIME_ANIMATION_SEARCH_INPUT);
return () => clearInterval(interval);
}
}
else {
setCurrentTextIndex(0);
}
}, [keyword, locale, isFocused]);
const getPlaceholder = useMemo(() => {
if (ALLOW_SHOW_SEARCH_ANIMATION.includes(locale) && !isFocused) {
return undefined;
}
if (siteType === 'marryBaby') {
return t('navigation.search.input.placeholder');
}
return t('home.search', {
site: LOCALE_SPECS[locale || 'en-PH']
? LOCALE_SPECS[locale || 'en-PH'].SITE_NAME
: '',
});
}, [locale, siteType, t, isFocused]);
return isMobile && !isHomepage ? (React__default.createElement(Button, { variant: "tertiary", style: {
padding: '6px',
}, size: "sm", onClick: goBack },
React__default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", style: {
verticalAlign: 'bottom',
} },
React__default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M3.3097 9.06111C3.3097 5.88483 5.88458 3.30994 9.06087 3.30994C12.2372 3.30994 14.812 5.88483 14.812 9.06111C14.812 12.2374 12.2372 14.8123 9.06087 14.8123C5.88458 14.8123 3.3097 12.2374 3.3097 9.06111ZM9.06087 1.66675C4.97707 1.66675 1.6665 4.97732 1.6665 9.06111C1.6665 13.1449 4.97707 16.4555 9.06087 16.4555C10.8067 16.4555 12.4112 15.8505 13.6761 14.8387L16.9305 18.0931C17.2514 18.4139 17.7716 18.4139 18.0924 18.0931C18.4133 17.7722 18.4133 17.252 18.0924 16.9312L14.8381 13.6768C15.8501 12.4118 16.4552 10.8071 16.4552 9.06111C16.4552 4.97732 13.1447 1.66675 9.06087 1.66675Z", fill: "#8C8C8C" })))) : (React__default.createElement(StyleSearchInputWrapper, null,
React__default.createElement(StyleInput, { className: "fake-search-input", name: 'search-input-menu-service' + id, size: "md", "data-event-category": eventCategoryTracking, "data-event-action": "Search", "data-event-label": keyword, placeholder: getPlaceholder, onChange: setKeyword, debouncedTime: debouncedTime, value: keyword, onKeyDown: (e) => e.key === 'Enter' &&
goToSearchPage(e.target.value), onBlur: () => {
setIsFocused(false);
setCurrentTextIndex(0);
}, type: "search", onFocus: (e) => {
e.preventDefault();
if ((isMobile && isHomepage) || isRedirectSearchPage) {
goToSearchPage('');
}
setIsFocused(true);
}, rightSection: keyword ? (React__default.createElement("div", { className: "close-icon-wrapper", onClick: () => setKeyword(''), "data-event-category": "Search Page", "data-event-action": "Delete Search" },
React__default.createElement(Close, { size: 17, color: theme.colors.white }))) : winCashBackTheme ? (React__default.createElement(StarPair, { className: "star-pair-icon" })) : (''), icon: React__default.createElement("a", { "data-event-category": "Search Button", "data-event-action": "Click", className: "search-icon-btn", onClick: () => {
if ((isMobile && isHomepage) || isRedirectSearchPage) {
goToSearchPage('');
}
} },
React__default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", style: {
verticalAlign: 'bottom',
} },
React__default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M3.3097 9.06111C3.3097 5.88483 5.88458 3.30994 9.06087 3.30994C12.2372 3.30994 14.812 5.88483 14.812 9.06111C14.812 12.2374 12.2372 14.8123 9.06087 14.8123C5.88458 14.8123 3.3097 12.2374 3.3097 9.06111ZM9.06087 1.66675C4.97707 1.66675 1.6665 4.97732 1.6665 9.06111C1.6665 13.1449 4.97707 16.4555 9.06087 16.4555C10.8067 16.4555 12.4112 15.8505 13.6761 14.8387L16.9305 18.0931C17.2514 18.4139 17.7716 18.4139 18.0924 18.0931C18.4133 17.7722 18.4133 17.252 18.0924 16.9312L14.8381 13.6768C15.8501 12.4118 16.4552 10.8071 16.4552 9.06111C16.4552 4.97732 13.1447 1.66675 9.06087 1.66675Z", fill: "#8C8C8C" }))) }),
!keyword &&
ALLOW_SHOW_SEARCH_ANIMATION.includes(locale) &&
!isFocused && (React__default.createElement(StyleSearchInputAnimationWrapper, { id: "search-input-animation-wrapper", "data-search-animation-wrapper": true }, (() => {
const texts = TEXT_PLACEHOLDER_INPUT[locale];
const currentText = texts === null || texts === void 0 ? void 0 : texts[currentTextIndex];
return currentText ? (React__default.createElement(StyledTextAnimationWrapper, { key: `${currentText}-${currentTextIndex}` },
React__default.createElement(StyledTextAnimation, null, t(currentText)))) : null;
})()))));
};
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$2 = {"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$2.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$2.menuButton },
item.name,
item.popupType && (React__default.createElement(React__default.Fragment, null, (item === null || item === void 0 ? void 0 : item.icon) ? (React__default.createElement("div", { className: "wrapper-menu-icon" },
React__default.createElement("div", { className: "origin-icon" }, item.icon),
React__default.createElement("div", { className: "close-icon", onClick: onClose },
React__default.createElement(Close, { size: 16 })))) : (React__default.createElement("div", { className: styles$2.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", 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 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$6 = 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$6, { 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$1, { 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$1 = styled.div `
margin: 15px 0;
display: flex;
`;
const StyledViewMore$1 = 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$1, null,
React__default.createElement(Heading, { tag: siteType === 'marryBaby' ? 'h5' : 'h6', as: "p", fontWeight: "semibold" }, title),
viewMore && (React__default.createElement(StyledViewMore$1, { "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$1, { 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') }))));
};
var styles$1 = {"gridContainer":"q3nL5cp","container":"_2DNf80G","closeWrapper":"Q-glX-n"};
const BtnClosePopup = ({ onClosePopup }) => {
return (React__default.createElement("div", { className: `${styles$1.closeWrapper} close-btn`, onClick: onClosePopup },
React__default.createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" },
React__default.createElement("path", { d: "M18 6L6 18M18 18L6 6", stroke: "#3E3F58", strokeWidth: "1.3", strokeLinecap: "round" }))));
};
const PopupWrapper = ({ onClosePopup, isDisplay, children, isNavMenu, hideCloseBtn, stylesContainer, }) => {
return (React__default.createElement("div", { className: "hhgcomp-navigation-popupwrapper-menuwrapper top-menu-health-tools", "data-is-display": !!isDisplay, "data-is-nav-menu": !!isNavMenu },
React__default.createElement(Container, { className: "hhgcomp-navigation-popupwrapper-menuwrapper-child" },
!hideCloseBtn && (React__default.createElement("div", { className: styles$1.container },
React__default.createElement(BtnClosePopup, { onClosePopup: onClosePopup }))),
React__default.createElement(Container, { className: styles$1.gridContainer, style: stylesContainer }, children))));
};
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 StyledCategoryList$1 = styled.div `
padding: 5px 15px;
`;
const StyledCategoryDivider = styled.div `
height: 4px;
background-color: #e4e8ec;
`;
const StyledItem$5 = 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 = 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 = 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;
}
`;
const Categories = ({ hrefViewMore, titleBtnViewMore, UrlFE, onClosePopup, menuItems, headingTitle, activeItem, }) => {
const { siteType } = useContext(NavigationContext);
return (React__default.createElement(StyledItemGridLeft, null,
React__default.createElement("div", null,
React__default.createElement(StyledHeading, 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(CategoriesItem, { key: index, menuItem: item, href: href, activeItem: activeItem, siteType: siteType, onClick: onClosePopup }));
})),
titleBtnViewMore && (React__default.createElement(StyledViewMore, { "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 CategoriesItem = ({ href, menuItem, activeItem, siteType, onClick, }) => {
const { name, thumbnail, link, linkTarget, isNew, id, isMobileAppTool,
// Break line
} = menuItem;
const { t } = useTranslations();
const theme = useMantineTheme();
return (React__default.createElement(StyledItem$5, { className: clsx('iconMenu', `itemMenu-${id}`), "data-event-category": "Hamburger Navigation", "data-event-action": "Click", "data-event-label": link, "data-is-heading-category": false, "data-active": id && id === activeItem, "data-is-mobile-tool": isMobileAppTool, href: href, target: linkTarget || !isInternalLink(href) ? '_blank' : undefined, "data-theme": siteType, onClick: onClick },
React__default.createElement("div", { className: "icon" },
React__default.createElement("img", { loading: "lazy", alt: name, src: thumbnail || '/images/avatar.jpg', style: {
width: 32,
height: 32,
maxWidth: 32,
maxHeight: 32,
overflow: 'hidden',
} })),
React__default.createElement(NewWrapper, { isNew: isNew },
React__default.createElement("div", { style: {
padding: '0 0.4rem',
paddingRight: isNew ? 10 : 0,
} },
React__default.createElement("p", { className: "name" }, name),
isMobileAppTool && (React__default.createElement(Text, { size: "n1", color: theme.fn.primaryColor(), weight: "regular" }, t('home.calcWithApp'))))),
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" }))));
};
const ExtraCategories = ({ menuItems, siteType, onClick, }) => {
return (React__default.createElement(React__default.Fragment, null,
React__default.createElement(StyledCategoryDivider, null),
React__default.createElement(StyledCategoryList$1, null, menuItems.map((item, index) => {
return (React__default.createElement(CategoriesItem, { key: index, menuItem: item, href: item.link, siteType: siteType, onClick: onClick }));
}))));
};
const MenuCareList = ({ careSpecialties = [], isOpen, onClose, spotlights = [], }) => {
var _a;
const { t } = useTranslations();
const { locale, configs: { statics }, } = useContext(NavigationContext);
return (React__default.createElement(PopupWrapper, { onClosePopup: onClose, isDisplay: isOpen, isNavMenu: true },
React__default.createElement(Categories, { headingTitle: t('home.navigator.menuItem.specialties'), hrefViewMore: `${statics.CARE_URL_FE}/`, UrlFE: statics.CARE_URL_FE, onClosePopup: onClose, titleBtnViewMore: t('home.navigator.menuItem.allSpecialties'), menuItems: (careSpecialties === null || careSpecialties === void 0 ? void 0 : careSpecialties.map((specialty) => {
if (!specialty)
return {};
return {
name: String(specialty.name) || '',
link: getCareSearchUrl({
type: 'DOCTOR',
specialtySlug: specialty.slug,
locale,
}),
thumbnail: (specialty === null || specialty === void 0 ? void 0 : specialty.thumbnail) || '',
};
})) || [] }),
React__default.createElement(CareSpotlights, { spotlights: spotlights, hrefViewMore: `${statics.CARE_URL_FE}/${(_a = LOCALIZED_SLUGS[locale]) === null || _a === void 0 ? void 0 : _a.SPECIALTIES}/` })));
};
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 `
position: relative;
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;
flex-shrink: 0;
}
`;
const StyledButton = styled.a `
${MediaQueries.tdDown} {
position: relative;
bottom: 0;
left: 16px;
right: 0;
padding: 4px 8px;
width: 90px;
height: 24px;
font-size: 11px;
line-height: 16px;
}
position: absolute;
bottom: 8px;
left: 8px;
right: 8px;
height: 32px;
padding: 6px 12px;
background: ${(props) => props.bgColor};
border-radius: 10px;
border: none;
transition: all 0.2s ease-in-out;
color: ${(props) => props.textColor};
font-family: 'Inter';
font-weight: 500;
font-size: 14px;
line-height: 20px;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
&:hover {
background: ${(props) => {
const bgColor = props.bgColor.toLowerCase();
if (bgColor === '#ffffff' || bgColor === 'white' || bgColor === '#fff') {
return '#f0f0f0';
}
if (typeof bgColor === 'string') {
const rgb = hexToRgb(bgColor, true);
const hsb = rgbToHsb(rgb.r, rgb.g, rgb.b);
const newPattern1 = hsbToRgb(hsb[0], hsb[1] + 16, hsb[2] - 16);
return `rgb(${newPattern1[0]},${newPattern1[1]},${newPattern1[2]})`;
}
return '';
}};
}
`;
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;
const linkProps = {
href: item.link,
'data-event-category': 'Hamburger Navigation',
'data-event-action': `Spotlight Click ${index + 1}`,
'data-event-label': item.link,
};
return (React__default.createElement(StyledItem$4, Object.assign({ key: item.id }, linkProps),
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("div", { style: {
display: 'flex',
flexDirection: 'column',
gap: 8,
} },
React__default.createElement(StyledTitle$3, null, item.title),
!!item.buttonDisplay && (React__default.createElement(StyledButton, Object.assign({ bgColor: item.buttonDisplay.button_background_color, textColor: item.buttonDisplay.button_text_color }, linkProps), item.buttonDisplay.button_label)))));
};
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,
buttonDisplay: spotlight.buttonDisplay,
} }))))) : (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 MenuCategoriesList = ({ categories = [], spotlightsList = [], onClose, isOpen, }) => {
const { t } = useTranslations();
const { locale, configs: { statics }, } = useContext(NavigationContext);
return (React__default.createElement(PopupWrapper, { onClosePopup: onClose, isDisplay: isOpen, isNavMenu: true },
React__default.createElement(Categories, { hrefViewMore: `${statics.HOME_PAGE_URL}${locale === 'tl-PH' ? '/fil' : ''}/categories/`, UrlFE: statics.HOME_PAGE_URL, onClosePopup: onClose, titleBtnViewMore: t('home.navigator.menuItem.allCategories'), menuItems: (categories === null || categories === void 0 ? void 0 : categories.map((cat) => {
if (!cat)
return {};
return {
name: cat.displayName || null,
link: (cat === null || cat === void 0 ? void 0 : cat.customizedUrl) || (cat === null || cat === void 0 ? void 0 : cat.permalink) || '/',
thumbnail: cat.iconUrl || null,
};
})) || [], headingTitle: t('home.navigator.menuItem.healthCategories') }),
React__default.createElement(CategorySpotlights, { spotlightsList: spotlightsList, hrefViewMore: `${statics.HOME_PAGE_URL}${locale === 'tl-PH' ? '/fil' : ''}/spotlight/` })));
};
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 Sty