@undp/design-system-react/dist/header-BWD1jAkz.cjs.map

React based design system for UNDP

{"version":3,"file":"header-BWD1jAkz.cjs","names":["createLucideIcon"],"sources":["../node_modules/lucide-react/dist/esm/icons/menu.js","../src/components/ui/header.tsx"],"sourcesContent":["/**\n * @license lucide-react v0.542.0 - ISC\n *\n * This source code is licensed under the ISC license.\n * See the LICENSE file in the root directory of this source tree.\n */\n\nimport createLucideIcon from '../createLucideIcon.js';\n\nconst __iconNode = [\n  [\"path\", { d: \"M4 12h16\", key: \"1lakjw\" }],\n  [\"path\", { d: \"M4 18h16\", key: \"19g7jn\" }],\n  [\"path\", { d: \"M4 6h16\", key: \"1o0s65\" }]\n];\nconst Menu = createLucideIcon(\"menu\", __iconNode);\n\nexport { __iconNode, Menu as default };\n//# sourceMappingURL=menu.js.map\n","import { Menu, X } from 'lucide-react';\nimport React from 'react';\n\nimport { cn } from '@/lib/utils';\n\nfunction Header({ className, children, ...props }: React.HTMLAttributes<HTMLElement>) {\n  return (\n    <header\n      {...props}\n      className={cn(\n        'relative top-0 left-0 z-10 box-border flex h-18.75 w-full max-w-full items-center justify-between gap-4 bg-surface-2xs px-6 py-0 shadow-header md:h-header',\n        className,\n      )}\n    >\n      {children}\n    </header>\n  );\n}\n\nfunction HeaderLogoUnit({\n  className,\n  siteName,\n  siteSubName,\n  hyperlink,\n  logoLocale,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement> & {\n  siteName: string;\n  siteSubName?: string;\n  hyperlink?: string;\n  logoLocale?: 'en' | 'fr' | 'es';\n}) {\n  return (\n    <div {...props} className={cn('flex items-center', className)}>\n      <a\n        href={hyperlink || './'}\n        style={{ textDecoration: 'none' }}\n        className='logo-sub-head flex items-center gap-6'\n      >\n        <img\n          src={`https://cdn.jsdelivr.net/npm/@undp/design-system-assets/images/${logoLocale === 'es' || logoLocale === 'fr' ? 'pnud' : 'undp'}-logo-blue.svg`}\n          alt='UNDP Logo'\n          className='z-100 h-20.5 w-10 md:h-30.5 md:w-15'\n        />\n        <div>\n          {siteSubName ? (\n            <div className='mx-0 mt-0 mb-[4.8px] inline-block border-b border-b-primary-gray-500 pb-px font-semibold text-primary-gray-600 text-xs uppercase leading-base no-underline'>\n              {siteSubName}\n            </div>\n          ) : null}\n          <div className='m-0 p-0 font-semibold text-base text-content-primary leading-base no-underline lg:text-xl'>\n            {siteName}\n          </div>\n        </div>\n      </a>\n    </div>\n  );\n}\n\nfunction HeaderMainNavUnit({\n  className,\n  children,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n  const [showMenu, setShowMenu] = React.useState(false);\n  return (\n    <>\n      <div\n        {...props}\n        className={cn('hidden grow justify-between gap-8 text-sm uppercase md:flex', className)}\n      >\n        {children}\n      </div>\n      <div {...props} className={cn('flex grow justify-end gap-8 md:hidden', className)}>\n        <button\n          type='button'\n          onClick={() => {\n            setShowMenu(!showMenu);\n          }}\n        >\n          {showMenu ? (\n            <X className='h-6 w-6 stroke-secondary' />\n          ) : (\n            <Menu className='h-6 w-6 stroke-secondary' />\n          )}\n        </button>\n        {showMenu ? (\n          // biome-ignore lint/a11y/noStaticElementInteractions: this is see if what is clicked is a link or not\n          <div\n            onClick={(e) => {\n              const target = e.target as HTMLElement;\n\n              if (target.closest('a')) {\n                setShowMenu(false);\n              }\n            }}\n            onKeyDown={() => {}}\n            className='absolute top-full left-0 m-0 box-border h-[calc(100vh-75px)] w-full overflow-y-auto bg-surface/80 p-[5.625rem_1.5rem_3.75rem] backdrop-blur-frosted'\n          >\n            {children}\n          </div>\n        ) : null}\n      </div>\n    </>\n  );\n}\n\nfunction HeaderMenuUnit({\n  className,\n  children,\n  align = 'center',\n  ...props\n}: React.HTMLAttributes<HTMLDivElement> & {\n  align?: 'center' | 'end';\n}) {\n  return (\n    <div\n      {...props}\n      className={cn(\n        'grid grow items-center gap-4 font-medium text-content-primary tracking-[0.42px] md:flex md:gap-8 [&>a:hover]:text-secondary [&>a]:font-bold [&>a]:text-base [&>a]:text-content-primary [&>a]:uppercase [&>a]:no-underline md:[&>a]:font-medium md:[&>a]:text-sm',\n        align === 'end' ? 'md:justify-end' : 'md:justify-center',\n        className,\n      )}\n    >\n      {children}\n    </div>\n  );\n}\n\nfunction HeaderActions({ className, children, ...props }: React.HTMLAttributes<HTMLDivElement>) {\n  return (\n    <div\n      {...props}\n      className={cn('mt-6 flex items-center gap-8 md:mt-0 md:justify-center', className)}\n    >\n      {children}\n    </div>\n  );\n}\n\nexport { Header, HeaderActions, HeaderLogoUnit, HeaderMainNavUnit, HeaderMenuUnit };\n"],"x_google_ignoreList":[0],"mappings":"qOAcA,IAAM,EAAOA,EAAAA,EAAiB,OAAQ,CAJpC,CAAC,OAAQ,CAAE,EAAG,WAAY,IAAK,QAAS,CAAC,EACzC,CAAC,OAAQ,CAAE,EAAG,WAAY,IAAK,QAAS,CAAC,EACzC,CAAC,OAAQ,CAAE,EAAG,UAAW,IAAK,QAAS,CAAC,CAEJ,CAAU,ECThD,SAAS,EAAO,CAAE,YAAW,WAAU,GAAG,GAA4C,CACpF,OACE,EAAA,EAAA,IAAA,CAAC,SAAD,CACE,GAAI,EACJ,UAAW,EAAA,EACT,6JACA,CACF,EAEC,UACK,CAAA,CAEZ,CAEA,SAAS,EAAe,CACtB,YACA,WACA,cACA,YACA,aACA,GAAG,GAMF,CACD,OACE,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,GAAI,EAAO,UAAW,EAAA,EAAG,oBAAqB,CAAS,YAC1D,EAAA,EAAA,KAAA,CAAC,IAAD,CACE,KAAM,GAAa,KACnB,MAAO,CAAE,eAAgB,MAAO,EAChC,UAAU,iDAHZ,EAKE,EAAA,EAAA,IAAA,CAAC,MAAD,CACE,IAAK,kEAAkE,IAAe,MAAQ,IAAe,KAAO,OAAS,OAAO,gBACpI,IAAI,YACJ,UAAU,qCACX,CAAA,GACD,EAAA,EAAA,KAAA,CAAC,MAAD,CAAA,SAAA,CACG,GACC,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,sKACZ,CACE,CAAA,EACH,MACJ,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,qGACZ,CACE,CAAA,CACF,CAAA,CAAA,CACJ,GACA,CAAA,CAET,CAEA,SAAS,EAAkB,CACzB,YACA,WACA,GAAG,GACoC,CACvC,GAAM,CAAC,EAAU,GAAe,EAAA,QAAM,SAAS,EAAK,EACpD,OACE,EAAA,EAAA,KAAA,CAAA,EAAA,SAAA,CAAA,SAAA,EACE,EAAA,EAAA,IAAA,CAAC,MAAD,CACE,GAAI,EACJ,UAAW,EAAA,EAAG,8DAA+D,CAAS,EAErF,UACE,CAAA,GACL,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,GAAI,EAAO,UAAW,EAAA,EAAG,wCAAyC,CAAS,WAAhF,EACE,EAAA,EAAA,IAAA,CAAC,SAAD,CACE,KAAK,SACL,YAAe,CACb,EAAY,CAAC,CAAQ,CACvB,WAEC,GACC,EAAA,EAAA,IAAA,CAAC,EAAA,EAAD,CAAG,UAAU,0BAA4B,CAAA,GAEzC,EAAA,EAAA,IAAA,CAAC,EAAD,CAAM,UAAU,0BAA4B,CAAA,CAExC,CAAA,EACP,GAEC,EAAA,EAAA,IAAA,CAAC,MAAD,CACE,QAAU,GAAM,CACC,EAAE,OAEN,QAAQ,GAAG,GACpB,EAAY,EAAK,CAErB,EACA,cAAiB,CAAC,EAClB,UAAU,sJAET,UACE,CAAA,EACH,IACD,GACL,CAAA,CAAA,CAEN,CAEA,SAAS,EAAe,CACtB,YACA,WACA,QAAQ,SACR,GAAG,GAGF,CACD,OACE,EAAA,EAAA,IAAA,CAAC,MAAD,CACE,GAAI,EACJ,UAAW,EAAA,EACT,kQACA,IAAU,MAAQ,iBAAmB,oBACrC,CACF,EAEC,UACE,CAAA,CAET,CAEA,SAAS,EAAc,CAAE,YAAW,WAAU,GAAG,GAA+C,CAC9F,OACE,EAAA,EAAA,IAAA,CAAC,MAAD,CACE,GAAI,EACJ,UAAW,EAAA,EAAG,yDAA0D,CAAS,EAEhF,UACE,CAAA,CAET"}