{"version":3,"file":"static/js/102.0e248501.chunk.js","mappings":"yMAAaA,EAIP,K,mBCDAC,EAAW,SAAH,GAA6C,IAAvCC,EAAK,EAALA,MACZC,GAAOC,EAAAA,EAAAA,MACLC,GAAmBC,EAAAA,EAAAA,MAAnBD,eAER,OACE,gBACEE,UAAS,gEACPC,EAAAA,EAAUN,GAAOO,QAAQ,IAAK,MAAQN,GAAQ,gBAAe,iFAE/DO,QAAS,kBAAML,EAAeG,EAAAA,EAAUN,GAAO,EAAC,SAE/CA,GAGP,EAEMS,EAAa,WACjB,OACE,iBAAKJ,UAAU,8EAA6E,UACzFK,OAAOC,KAAKL,EAAAA,GAAWM,KAAI,SAACZ,GAAK,OAChC,SAACD,EAAQ,CAAaC,MAAOA,GAAdA,EAAwC,KAEzD,cACEa,KAAK,mBACLR,UAAU,0JAAyJ,mCAM3K,EAiBA,EAfsB,SAAH,GAA6E,IAAvES,EAAM,EAANA,OAAQC,EAAU,EAAVA,WACzBC,EAAa,2EAEnB,OACE,iBAAKX,UAAU,WAAWG,QAASO,EAAW,WAC5C,iBAAKV,UAAU,gBAAe,WAC5B,gBAAKA,UAAS,UAAKW,EAAa,YAAIF,GAAU,gCAC9C,gBAAKT,UAAS,UAAKW,EAAa,YAAIF,GAAU,iBAC9C,gBAAKT,UAAS,UAAKW,EAAa,YAAIF,GAAU,kCAE/CA,IAAU,SAACL,EAAU,MAG5B,E,UCxCA,EALiB,WACf,IAAQN,GAAmBC,EAAAA,EAAAA,MAAnBD,eACR,OAAO,gBAAKc,IAAKC,EAAMC,IAAI,YAAYd,UAAU,6BAA6BG,QAAS,kBAAML,EAAe,IAAI,GAClH,ECHMJ,EAAW,SAAH,GAA6C,IAAvCC,EAAK,EAALA,MACVG,GAAmBC,EAAAA,EAAAA,MAAnBD,eACFF,GAAOC,EAAAA,EAAAA,MAEb,OACE,gBACEG,UAAS,4DACPC,EAAAA,EAAUN,GAAOO,QAAQ,IAAK,MAAQN,GAAQ,gBAAe,mEAE/DO,QAAS,kBAAML,EAAeG,EAAAA,EAAUN,GAAO,EAAC,SAE/CA,GAGP,EAYA,EAVa,WACX,OACE,gBAAKK,UAAU,0BAAyB,SACrCK,OAAOC,KAAKL,EAAAA,GAAWM,KAAI,SAACZ,GAAK,OAChC,SAAC,EAAQ,CAAaA,MAAOA,GAAdA,EAAwC,KAI/D,ECcA,EA/Be,WACb,IAAMC,GAAOC,EAAAA,EAAAA,MACb,GAA4BkB,EAAAA,EAAAA,WAAkB,GAAM,eAA7CN,EAAM,KAAEO,EAAS,KAChBC,GAAaC,EAAAA,EAAAA,MAAbD,SACAE,GAAgBC,EAAAA,EAAAA,KAAhBD,YACFE,GAAgBC,EAAAA,EAAAA,UAAQ,kBAAMH,EAAc1B,CAAU,GAAE,CAAC0B,IACzDI,GAAkBD,EAAAA,EAAAA,UAAQ,iBAAgB,KAAT1B,GAAeqB,EAAW,WAAa,gBAAgB,GAAG,CAACA,EAAUrB,IAEtGc,GAAac,EAAAA,EAAAA,cAAY,WAC7BR,GAAU,SAACS,GAAI,OAAMA,CAAI,GAC3B,GAAG,IAEH,OACE,gBAAKzB,UAAS,wFAAmFuB,GAAkB,UACjH,iBAAKvB,UAAU,oFAAmF,WAChG,SAAC,EAAQ,IACRqB,GACC,SAAC,EAAa,CAACZ,OAAQA,EAAQC,WAAYA,KAE3C,iBAAKV,UAAU,oBAAmB,WAChC,SAAC,EAAI,KACL,cAAGQ,KAAK,mBAAmBR,UAAU,qDAAoD,wCAQrG,C,uDCrCO,IAAMC,EAAgD,CAC3DyB,KAAM,IACNC,MAAO,SACP,gBAAiB,iBACjB,gBAAiB,iBACjBC,QAAS,WACT,iBAAkB,kB","sources":["theme/utils.ts","components/Header/HamburgerIcon.tsx","components/Header/MainLogo.tsx","components/Header/Menu.tsx","components/Header/index.tsx","config/routes/index.ts"],"sourcesContent":["export const screens = {\n  xs: 480,\n  sm: 640,\n  md: 768,\n  lg: 1024,\n  xl: 1280,\n  '2xl': 1440,\n}\n","import { ROUTE_MAP, TRouteVariant } from 'config/routes'\nimport { useAppNavigate, useGetCurrentURLPath } from 'hooks'\n\nconst MenuItem = ({ route }: { route: TRouteVariant }) => {\n  const path = useGetCurrentURLPath()\n  const { handleNavigate } = useAppNavigate()\n\n  return (\n    <div\n      className={`cursor-pointer w-full px-6 py-2 rounded-sm font-title ${\n        ROUTE_MAP[route].replace('/', '') === path && 'text-cyan-700'\n      } hover:text-cyan-700 hover:bg-cyan transition-colors duration-300 ease-in-out`}\n      onClick={() => handleNavigate(ROUTE_MAP[route])}\n    >\n      {route}\n    </div>\n  )\n}\n\nconst MobileMenu = () => {\n  return (\n    <div className=\"fixed top-20 left-0 flex flex-col items-start w-full h-screen bg-white px-4\">\n      {Object.keys(ROUTE_MAP).map((route) => (\n        <MenuItem key={route} route={route as TRouteVariant} />\n      ))}\n      <a\n        href=\"tel:919-473-9430\"\n        className=\"mt-4 px-6 py-3 bg-cyan-700 text-white text-center rounded-full hover:bg-cyan-800 transition-colors duration-300 ease-in-out self-center max-w-xs w-full\"\n      >\n        Call (919) 473-9430\n      </a>\n    </div>\n  )\n}\n\nconst HamburgerIcon = ({ isShow, handleShow }: { isShow: boolean; handleShow: () => void }) => {\n  const iconClassName = `h-[1px] w-4 my-0.5 rounded-full bg-black transition ease-in duration-300`\n\n  return (\n    <div className=\"relative\" onClick={handleShow}>\n      <div className=\"flex flex-col\">\n        <div className={`${iconClassName} ${isShow && 'rotate-45 translate-y-1.5'}`} />\n        <div className={`${iconClassName} ${isShow && '!opacity-0'}`} />\n        <div className={`${iconClassName} ${isShow && '-rotate-45 -translate-y-1'}`} />\n      </div>\n      {isShow && <MobileMenu />}\n    </div>\n  )\n}\n\nexport default HamburgerIcon\n","import LOGO from 'assets/images/logo.png'\nimport { useAppNavigate } from 'hooks'\n\nconst MainLogo = () => {\n  const { handleNavigate } = useAppNavigate()\n  return <img src={LOGO} alt=\"main-logo\" className=\"h-14 w-auto cursor-pointer\" onClick={() => handleNavigate('/')} />\n}\n\nexport default MainLogo\n","import { ROUTE_MAP, TRouteVariant } from 'config/routes'\nimport { useAppNavigate, useGetCurrentURLPath } from 'hooks'\n\nconst MenuItem = ({ route }: { route: TRouteVariant }) => {\n  const { handleNavigate } = useAppNavigate()\n  const path = useGetCurrentURLPath()\n\n  return (\n    <div\n      className={`px-5 py-3 cursor-pointer font-title font-semibold ${\n        ROUTE_MAP[route].replace('/', '') === path && 'text-cyan-700'\n      } hover:text-cyan-700 transition-colors duration-300 ease-in-out`}\n      onClick={() => handleNavigate(ROUTE_MAP[route])}\n    >\n      {route}\n    </div>\n  )\n}\n\nconst Menu = () => {\n  return (\n    <div className=\"flex items-center gap-2\">\n      {Object.keys(ROUTE_MAP).map((route) => (\n        <MenuItem key={route} route={route as TRouteVariant} />\n      ))}\n    </div>\n  )\n}\n\nexport default Menu\n","import { useCallback, useMemo, useState } from 'react'\n\nimport { useScreenSizeContext } from 'contexts'\nimport { useGetCurrentURLPath, useScroll } from 'hooks'\nimport { screens } from 'theme/utils'\n\nimport HamburgerIcon from './HamburgerIcon'\nimport MainLogo from './MainLogo'\nimport Menu from './Menu'\n\nconst Header = () => {\n  const path = useGetCurrentURLPath()\n  const [isShow, setIsShow] = useState<boolean>(false)\n  const { isScroll } = useScroll()\n  const { screenWidth } = useScreenSizeContext()\n  const isSmallScreen = useMemo(() => screenWidth < screens.lg, [screenWidth])\n  const backgroundColor = useMemo(() => (path !== '' || isScroll ? 'bg-white' : 'bg-transparent'), [isScroll, path])\n\n  const handleShow = useCallback(() => {\n    setIsShow((prev) => !prev)\n  }, [])\n\n  return (\n    <div className={`fixed top-0 left-0 flex w-full items-center h-20 transition duration-300 z-10 ${backgroundColor}`}>\n      <div className=\"flex w-full justify-between items-center max-w-[1440px] mx-auto px-[4%] py-[10px]\">\n        <MainLogo />\n        {isSmallScreen ? (\n          <HamburgerIcon isShow={isShow} handleShow={handleShow} />\n        ) : (\n          <div className=\"flex items-center\">\n            <Menu />\n            <a href=\"tel:919-473-9430\" className=\"ml-4 px-4 py-2 bg-cyan-700 text-white rounded-full\">\n              Call (919) 473-9430\n            </a>\n          </div>\n        )}\n      </div>\n    </div>\n  )\n}\n\nexport default Header\n","export type TRouteVariant = 'Home' | 'About' | 'Water Coolers' | 'Our Guarantee' | 'Contact' | 'Privacy Policy'\n\nexport const ROUTE_MAP: { [key in TRouteVariant]: string } = {\n  Home: '/',\n  About: '/about',\n  'Water Coolers': '/water-coolers',\n  'Our Guarantee': '/our-guarantee',\n  Contact: '/contact',\n  'Privacy Policy': '/privacy-policy',\n}\n"],"names":["screens","MenuItem","route","path","useGetCurrentURLPath","handleNavigate","useAppNavigate","className","ROUTE_MAP","replace","onClick","MobileMenu","Object","keys","map","href","isShow","handleShow","iconClassName","src","LOGO","alt","useState","setIsShow","isScroll","useScroll","screenWidth","useScreenSizeContext","isSmallScreen","useMemo","backgroundColor","useCallback","prev","Home","About","Contact"],"sourceRoot":""}