@hhgtech/hhg-components
Version:
Hello Health Group common components
1,234 lines (1,179 loc) • 125 kB
JavaScript
import { _ as __rest, a as __awaiter } from './tslib.es6-107c23d7.js';
import React__default, { useContext, useState, useCallback, useEffect, useMemo, useRef } from 'react';
import { V as VideoType } from './index-6482e49b.js';
import { i as isInternalLink, V as VideoItem, L as LanguageSwitcher } from './index-21b14232.js';
import { L as LOCALE_SPECS, S as STATIC_PAGES, T as TOGETHER_LOCALES, a as CARE_LOCALES } from './index-e053201b.js';
import { n as normalizeLink, e as normalizeLinkSlash, g as getCurrentBaseUrl, c as getDiscoverApiDomain, b as getTogetherApiDomain, d as getCareApiDomain } from './normalizeLink-8db8cf91.js';
import { a as formatCommunity, b as formatPost } from './dataTransform-7a8ce18a.js';
import { Close, Logo } from '@hhgtech/icons/core';
import './translationsContext-40d5537d.js';
import styled from '@emotion/styled';
import { I as Input } from './index-2a289da8.js';
import { theme } from './miscTheme.js';
import { a as NavigationContext, u as useCSSFocusPopupHelper, N as NavigationProfileButton, b as NavigationProvider } from './index-6e8d7d0b.js';
import { ArrowRight, ChatAi } from '@hhgtech/icons/other';
import { createStyles, Box, Indicator, useMantineTheme } from '@mantine/core';
import { L as Logo$1 } from './index-3b56ed67.js';
import throttle from 'lodash/throttle';
import '@mantine/dates';
import { C as CommonGAssets } from './index-461f72c9.js';
import './index-6ae951d5.js';
import { T as Text } from './index-a5768260.js';
import { B as Button } from './index-92ed0334.js';
import './index.styles-05fc133d.js';
import '@mantine/hooks';
import './text-48aef61b.js';
import { g as getBoundariesFromMediaQueryKey, M as MediaQueries } from './utils-50ee2849.js';
import './index-7f1ed00b.js';
import { L as LOCALISED_SLUGS } from './constants-c1f4a1a2.js';
import { u as useSSOV2Store, I as IS_SSOV2_ENABLED } from './store-b4a996e2.js';
import { L as LOCALIZED_SLUGS } from './constants-e83c4835.js';
import { u as useTranslations } from './index-1215bc9f.js';
import { H as Heading } from './index-2953a674.js';
import { I as Indicator$1 } from './index-71de2bcc.js';
import { u as useIsInit } from './useIsInit-21e41918.js';
import { setDefaultClass } from './miscDefaultClassWrapper.js';
import { B as Button$1 } from './index-c0f27429.js';
import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime';
import { U as UserAvatar } from './index-42f52871.js';
import formatString from 'string-format';
import { domainLocales } from './constantsDomainLocales.js';
import { C as Container } from './index-46de244d.js';
import debounce from 'lodash/debounce';
import { L as LOCALE } from './Locale-f790f969.js';
import { g as getDataWithCache } from './core-4e16b9f7.js';
const StyleInput = styled(Input) `
.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 HHG_SEARCH_BACK_KEY = 'hhg_search_history';
const SearchInput = ({ id, isMobile = false, isHomepage = false, projectType, isRedirectSearchPage = false, }) => {
const { locale, siteType } = useContext(NavigationContext);
const [keyword, setKeyword] = useState('');
const [eventCategoryTracking, setEventCategoryTracking] = useState('Search From Another Page');
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 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);
}
}, []);
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(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: siteType === 'marryBaby'
? t('navigation.search.input.placeholder')
: t('home.search', {
site: LOCALE_SPECS[locale || 'en-PH']
? LOCALE_SPECS[locale || 'en-PH'].SITE_NAME
: '',
}), onChange: setKeyword, value: keyword, onKeyDown: (e) => e.key === 'Enter' &&
goToSearchPage(e.target.value), type: "search", onFocus: (e) => {
e.preventDefault();
if ((isMobile && isHomepage) || isRedirectSearchPage) {
goToSearchPage('');
}
}, 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 }))) : (''), 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" }))) }));
};
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 = {"menuContainer":"y5VJdvw","menuIcon":"oVhOSCy","menuIconWrapper":"pX8OXTM"};
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, style, }) {
if (siteType === 'helloSites') {
return (React__default.createElement("div", { className: "hamburger-container" },
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: Object.assign({ width: '24px', height: '24px' }, style), 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(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$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$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 = 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$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') }))));
};
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__defa