@nordcom/nordstar-header
Version:
Generic simple component to render headers for landing pages and similar.
73 lines (72 loc) • 10.5 kB
JavaScript
import { Card } from "@nordcom/nordstar-card";
import { cn, forwardRef } from "@nordcom/nordstar-system";
import { View } from "@nordcom/nordstar-view";
import { jsx } from "react/jsx-runtime";
//#region src/header.tsx
var Header = forwardRef(({ sticky = true, className, children, ...props }, ref) => {
return /* @__PURE__ */ jsx(Card, {
as: "header",
ref,
...props,
borderless: true,
className: cn("z-10 mb-3 flex min-h-20 w-full flex-1 grow items-center justify-center rounded-none border-0 border-none bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/75 md:h-20", sticky && "sticky inset-0 bottom-auto z-40 border-0 border-background-highlight border-b-2 border-solid", className),
"data-sticky": sticky,
children: /* @__PURE__ */ jsx(View, {
as: "div",
className: cn("m-0 grid h-full w-full max-w-(--nordstar-layout-page-width) grid-cols-[1fr] items-center justify-center gap-3 border-0 border-none p-0 md:grid-cols-[1fr_auto]"),
withoutWrapper: true,
children
})
});
});
/**
* `<Header.Logo/>`, a component to render a header's logo.
* @param {HeaderLogoProps} props - `<Header.Logo/>` props.
* @returns {React.ReactNode} The `<Header.Logo/>` component.
*/
var Logo = forwardRef(({ as, className, ...props }, ref) => {
return /* @__PURE__ */ jsx(as || "section", {
...props,
className: cn("font-extrabold text-lg uppercase *:h-full *:object-contain *:object-left [&>a]:transition-colors [&>a]:hover:text-primary [&>a]:focus-visible:text-primary", className),
draggable: false,
ref
});
});
/**
* `<Header.Menu/>`, a component to render a header's content.
* @param {HeaderMenuProps} props - `<Header.Menu/>` props.
* @returns {React.ReactNode} The `<Header.Menu/>` component.
*/
var Menu = forwardRef(({ as, className, overflowShadow = true, ...props }, ref) => {
return /* @__PURE__ */ jsx(as || "nav", {
...props,
className: cn("flex w-full touch-auto select-none items-center gap-6 overflow-x-auto scroll-smooth py-3 md:justify-end", overflowShadow && "animate-scroll-shadow-inset [animation-timeline:scroll(self_inline)]", className),
"data-overflow-shadow": overflowShadow,
draggable: false,
ref
});
});
/**
* `<Header.Menu.Link/>`, a component to render header links.
* @param {HeaderMenuLinkProps} props - `<Header.Menu.Link/>` props.
* @returns {React.ReactNode} The `<Header.Menu.Link/>` component.
*/
var Link = forwardRef(({ as, className, ...props }, ref) => {
return /* @__PURE__ */ jsx(as || "a", {
...props,
className: cn("cursor-pointer whitespace-nowrap break-all font-body font-extrabold text-sm uppercase leading-none transition-colors hover:text-primary focus-visible:text-primary active:text-primary md:text-base", className),
draggable: false,
ref
});
});
var header_default = Object.assign(Header, {
displayName: "Nordstar.Header",
Logo: Object.assign(Logo, { displayName: "Nordstar.Header.Logo" }),
Menu: Object.assign(Menu, {
displayName: "Nordstar.Header.Menu",
Link: Object.assign(Link, { displayName: "Nordstar.Header.Menu.Link" })
})
});
//#endregion
export { header_default as default };
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaGVhZGVyLmpzIiwibmFtZXMiOltdLCJzb3VyY2VzIjpbIi4uL3NyYy9oZWFkZXIudHN4Il0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENhcmQgfSBmcm9tICdAbm9yZGNvbS9ub3Jkc3Rhci1jYXJkJztcbmltcG9ydCB0eXBlIHsgQXMsIENTU0N1c3RvbVByb3BlcnRpZXMgfSBmcm9tICdAbm9yZGNvbS9ub3Jkc3Rhci1zeXN0ZW0nO1xuaW1wb3J0IHsgY24sIGZvcndhcmRSZWYgfSBmcm9tICdAbm9yZGNvbS9ub3Jkc3Rhci1zeXN0ZW0nO1xuaW1wb3J0IHsgVmlldyB9IGZyb20gJ0Bub3JkY29tL25vcmRzdGFyLXZpZXcnO1xuaW1wb3J0IHR5cGUgeyBDb21wb25lbnRQcm9wcyB9IGZyb20gJ3JlYWN0JztcblxuZXhwb3J0IHR5cGUgSGVhZGVyUHJvcHMgPSB7XG4gICAgc3RpY2t5PzogYm9vbGVhbjtcbiAgICBzdHlsZT86IENTU0N1c3RvbVByb3BlcnRpZXMgfCB1bmRlZmluZWQ7XG59ICYgT21pdDxDb21wb25lbnRQcm9wczwnaGVhZGVyJz4sICdjb2xvcic+O1xuXG5jb25zdCBIZWFkZXIgPSBmb3J3YXJkUmVmPCdoZWFkZXInLCBIZWFkZXJQcm9wcz4oKHsgc3RpY2t5ID0gdHJ1ZSwgY2xhc3NOYW1lLCBjaGlsZHJlbiwgLi4ucHJvcHMgfSwgcmVmKSA9PiB7XG4gICAgcmV0dXJuIChcbiAgICAgICAgPENhcmRcbiAgICAgICAgICAgIGFzPVwiaGVhZGVyXCJcbiAgICAgICAgICAgIHJlZj17cmVmfVxuICAgICAgICAgICAgey4uLnByb3BzfVxuICAgICAgICAgICAgYm9yZGVybGVzcz17dHJ1ZX1cbiAgICAgICAgICAgIGNsYXNzTmFtZT17Y24oXG4gICAgICAgICAgICAgICAgJ3otMTAgbWItMyBmbGV4IG1pbi1oLTIwIHctZnVsbCBmbGV4LTEgZ3JvdyBpdGVtcy1jZW50ZXIganVzdGlmeS1jZW50ZXIgcm91bmRlZC1ub25lIGJvcmRlci0wIGJvcmRlci1ub25lIGJnLWJhY2tncm91bmQvOTUgYmFja2Ryb3AtYmx1ciBzdXBwb3J0cy1bYmFja2Ryb3AtZmlsdGVyXTpiZy1iYWNrZ3JvdW5kLzc1IG1kOmgtMjAnLFxuICAgICAgICAgICAgICAgIHN0aWNreSAmJlxuICAgICAgICAgICAgICAgICAgICAnc3RpY2t5IGluc2V0LTAgYm90dG9tLWF1dG8gei00MCBib3JkZXItMCBib3JkZXItYmFja2dyb3VuZC1oaWdobGlnaHQgYm9yZGVyLWItMiBib3JkZXItc29saWQnLFxuICAgICAgICAgICAgICAgIGNsYXNzTmFtZSxcbiAgICAgICAgICAgICl9XG4gICAgICAgICAgICBkYXRhLXN0aWNreT17c3RpY2t5fVxuICAgICAgICA+XG4gICAgICAgICAgICA8Vmlld1xuICAgICAgICAgICAgICAgIGFzPVwiZGl2XCJcbiAgICAgICAgICAgICAgICBjbGFzc05hbWU9e2NuKFxuICAgICAgICAgICAgICAgICAgICAnbS0wIGdyaWQgaC1mdWxsIHctZnVsbCBtYXgtdy0oLS1ub3Jkc3Rhci1sYXlvdXQtcGFnZS13aWR0aCkgZ3JpZC1jb2xzLVsxZnJdIGl0ZW1zLWNlbnRlciBqdXN0aWZ5LWNlbnRlciBnYXAtMyBib3JkZXItMCBib3JkZXItbm9uZSBwLTAgbWQ6Z3JpZC1jb2xzLVsxZnJfYXV0b10nLFxuICAgICAgICAgICAgICAgICl9XG4gICAgICAgICAgICAgICAgd2l0aG91dFdyYXBwZXI9e3RydWV9XG4gICAgICAgICAgICA+XG4gICAgICAgICAgICAgICAge2NoaWxkcmVufVxuICAgICAgICAgICAgPC9WaWV3PlxuICAgICAgICA8L0NhcmQ+XG4gICAgKTtcbn0pO1xuXG5leHBvcnQgdHlwZSBIZWFkZXJMb2dvUHJvcHMgPSB7XG4gICAgYXM/OiBBcztcbn0gJiBDb21wb25lbnRQcm9wczwnc2VjdGlvbic+O1xuXG4vKipcbiAqIGA8SGVhZGVyLkxvZ28vPmAsIGEgY29tcG9uZW50IHRvIHJlbmRlciBhIGhlYWRlcidzIGxvZ28uXG4gKiBAcGFyYW0ge0hlYWRlckxvZ29Qcm9wc30gcHJvcHMgLSBgPEhlYWRlci5Mb2dvLz5gIHByb3BzLlxuICogQHJldHVybnMge1JlYWN0LlJlYWN0Tm9kZX0gVGhlIGA8SGVhZGVyLkxvZ28vPmAgY29tcG9uZW50LlxuICovXG5jb25zdCBMb2dvID0gZm9yd2FyZFJlZjwnc2VjdGlvbicsIEhlYWRlckxvZ29Qcm9wcz4oKHsgYXMsIGNsYXNzTmFtZSwgLi4ucHJvcHMgfSwgcmVmKSA9PiB7XG4gICAgY29uc3QgVGFnID0gYXMgfHwgJ3NlY3Rpb24nO1xuICAgIHJldHVybiAoXG4gICAgICAgIDxUYWdcbiAgICAgICAgICAgIHsuLi5wcm9wc31cbiAgICAgICAgICAgIGNsYXNzTmFtZT17Y24oXG4gICAgICAgICAgICAgICAgJ2ZvbnQtZXh0cmFib2xkIHRleHQtbGcgdXBwZXJjYXNlICo6aC1mdWxsICo6b2JqZWN0LWNvbnRhaW4gKjpvYmplY3QtbGVmdCBbJj5hXTp0cmFuc2l0aW9uLWNvbG9ycyBbJj5hXTpob3Zlcjp0ZXh0LXByaW1hcnkgWyY+YV06Zm9jdXMtdmlzaWJsZTp0ZXh0LXByaW1hcnknLFxuICAgICAgICAgICAgICAgIGNsYXNzTmFtZSxcbiAgICAgICAgICAgICl9XG4gICAgICAgICAgICBkcmFnZ2FibGU9e2ZhbHNlfVxuICAgICAgICAgICAgcmVmPXtyZWZ9XG4gICAgICAgIC8+XG4gICAgKTtcbn0pO1xuXG5leHBvcnQgdHlwZSBIZWFkZXJNZW51UHJvcHMgPSB7XG4gICAgYXM/OiBBcztcbiAgICBvdmVyZmxvd1NoYWRvdz86IGJvb2xlYW47XG59O1xuXG4vKipcbiAqIGA8SGVhZGVyLk1lbnUvPmAsIGEgY29tcG9uZW50IHRvIHJlbmRlciBhIGhlYWRlcidzIGNvbnRlbnQuXG4gKiBAcGFyYW0ge0hlYWRlck1lbnVQcm9wc30gcHJvcHMgLSBgPEhlYWRlci5NZW51Lz5gIHByb3BzLlxuICogQHJldHVybnMge1JlYWN0LlJlYWN0Tm9kZX0gVGhlIGA8SGVhZGVyLk1lbnUvPmAgY29tcG9uZW50LlxuICovXG5jb25zdCBNZW51ID0gZm9yd2FyZFJlZjwnbmF2JywgSGVhZGVyTWVudVByb3BzPigoeyBhcywgY2xhc3NOYW1lLCBvdmVyZmxvd1NoYWRvdyA9IHRydWUsIC4uLnByb3BzIH0sIHJlZikgPT4ge1xuICAgIGNvbnN0IFRhZyA9IGFzIHx8ICduYXYnO1xuXG4gICAgcmV0dXJuIChcbiAgICAgICAgPFRhZ1xuICAgICAgICAgICAgey4uLnByb3BzfVxuICAgICAgICAgICAgY2xhc3NOYW1lPXtjbihcbiAgICAgICAgICAgICAgICAnZmxleCB3LWZ1bGwgdG91Y2gtYXV0byBzZWxlY3Qtbm9uZSBpdGVtcy1jZW50ZXIgZ2FwLTYgb3ZlcmZsb3cteC1hdXRvIHNjcm9sbC1zbW9vdGggcHktMyBtZDpqdXN0aWZ5LWVuZCcsXG4gICAgICAgICAgICAgICAgb3ZlcmZsb3dTaGFkb3cgJiYgJ2FuaW1hdGUtc2Nyb2xsLXNoYWRvdy1pbnNldCBbYW5pbWF0aW9uLXRpbWVsaW5lOnNjcm9sbChzZWxmX2lubGluZSldJyxcbiAgICAgICAgICAgICAgICBjbGFzc05hbWUsXG4gICAgICAgICAgICApfVxuICAgICAgICAgICAgZGF0YS1vdmVyZmxvdy1zaGFkb3c9e292ZXJmbG93U2hhZG93fVxuICAgICAgICAgICAgZHJhZ2dhYmxlPXtmYWxzZX1cbiAgICAgICAgICAgIHJlZj17cmVmfVxuICAgICAgICAvPlxuICAgICk7XG59KTtcblxuZXhwb3J0IHR5cGUgSGVhZGVyTWVudUxpbmtQcm9wcyA9IHtcbiAgICBhcz86IEFzO1xufTtcblxuLyoqXG4gKiBgPEhlYWRlci5NZW51LkxpbmsvPmAsIGEgY29tcG9uZW50IHRvIHJlbmRlciBoZWFkZXIgbGlua3MuXG4gKiBAcGFyYW0ge0hlYWRlck1lbnVMaW5rUHJvcHN9IHByb3BzIC0gYDxIZWFkZXIuTWVudS5MaW5rLz5gIHByb3BzLlxuICogQHJldHVybnMge1JlYWN0LlJlYWN0Tm9kZX0gVGhlIGA8SGVhZGVyLk1lbnUuTGluay8+YCBjb21wb25lbnQuXG4gKi9cbmNvbnN0IExpbmsgPSBmb3J3YXJkUmVmPCdhJywgSGVhZGVyTWVudUxpbmtQcm9wcz4oKHsgYXMsIGNsYXNzTmFtZSwgLi4ucHJvcHMgfSwgcmVmKSA9PiB7XG4gICAgY29uc3QgVGFnID0gYXMgfHwgJ2EnO1xuXG4gICAgcmV0dXJuIChcbiAgICAgICAgPFRhZ1xuICAgICAgICAgICAgey4uLnByb3BzfVxuICAgICAgICAgICAgY2xhc3NOYW1lPXtjbihcbiAgICAgICAgICAgICAgICAnY3Vyc29yLXBvaW50ZXIgd2hpdGVzcGFjZS1ub3dyYXAgYnJlYWstYWxsIGZvbnQtYm9keSBmb250LWV4dHJhYm9sZCB0ZXh0LXNtIHVwcGVyY2FzZSBsZWFkaW5nLW5vbmUgdHJhbnNpdGlvbi1jb2xvcnMgaG92ZXI6dGV4dC1wcmltYXJ5IGZvY3VzLXZpc2libGU6dGV4dC1wcmltYXJ5IGFjdGl2ZTp0ZXh0LXByaW1hcnkgbWQ6dGV4dC1iYXNlJyxcbiAgICAgICAgICAgICAgICBjbGFzc05hbWUsXG4gICAgICAgICAgICApfVxuICAgICAgICAgICAgZHJhZ2dhYmxlPXtmYWxzZX1cbiAgICAgICAgICAgIHJlZj17cmVmfVxuICAgICAgICAvPlxuICAgICk7XG59KTtcblxuZXhwb3J0IGRlZmF1bHQgT2JqZWN0LmFzc2lnbihIZWFkZXIsIHtcbiAgICBkaXNwbGF5TmFtZTogJ05vcmRzdGFyLkhlYWRlcicsXG4gICAgTG9nbzogT2JqZWN0LmFzc2lnbihMb2dvLCB7XG4gICAgICAgIGRpc3BsYXlOYW1lOiAnTm9yZHN0YXIuSGVhZGVyLkxvZ28nLFxuICAgIH0pLFxuICAgIE1lbnU6IE9iamVjdC5hc3NpZ24oTWVudSwge1xuICAgICAgICBkaXNwbGF5TmFtZTogJ05vcmRzdGFyLkhlYWRlci5NZW51JyxcbiAgICAgICAgTGluazogT2JqZWN0LmFzc2lnbihMaW5rLCB7XG4gICAgICAgICAgICBkaXNwbGF5TmFtZTogJ05vcmRzdGFyLkhlYWRlci5NZW51LkxpbmsnLFxuICAgICAgICB9KSxcbiAgICB9KSxcbn0pO1xuIl0sIm1hcHBpbmdzIjoiOzs7OztBQVdBLElBQU0sU0FBUyxZQUFtQyxFQUFFLFNBQVMsTUFBTSxXQUFXLFVBQVUsR0FBRyxTQUFTLFFBQVE7Q0FDeEcsT0FDSSxvQkFBQyxNQUFEO0VBQ0ksSUFBRztFQUNFO0VBQ0wsR0FBSTtFQUNKLFlBQVk7RUFDWixXQUFXLEdBQ1AsK0xBQ0EsVUFDSSxnR0FDSixTQUNKO0VBQ0EsZUFBYTtZQUViLG9CQUFDLE1BQUQ7R0FDSSxJQUFHO0dBQ0gsV0FBVyxHQUNQLGdLQUNKO0dBQ0EsZ0JBQWdCO0dBRWY7RUFDQyxDQUFBO0NBQ0osQ0FBQTtBQUVkLENBQUM7Ozs7OztBQVdELElBQU0sT0FBTyxZQUF3QyxFQUFFLElBQUksV0FBVyxHQUFHLFNBQVMsUUFBUTtDQUV0RixPQUNJLG9CQUZRLE1BQU0sV0FFZDtFQUNJLEdBQUk7RUFDSixXQUFXLEdBQ1AsOEpBQ0EsU0FDSjtFQUNBLFdBQVc7RUFDTjtDQUNSLENBQUE7QUFFVCxDQUFDOzs7Ozs7QUFZRCxJQUFNLE9BQU8sWUFBb0MsRUFBRSxJQUFJLFdBQVcsaUJBQWlCLE1BQU0sR0FBRyxTQUFTLFFBQVE7Q0FHekcsT0FDSSxvQkFIUSxNQUFNLE9BR2Q7RUFDSSxHQUFJO0VBQ0osV0FBVyxHQUNQLDJHQUNBLGtCQUFrQix3RUFDbEIsU0FDSjtFQUNBLHdCQUFzQjtFQUN0QixXQUFXO0VBQ047Q0FDUixDQUFBO0FBRVQsQ0FBQzs7Ozs7O0FBV0QsSUFBTSxPQUFPLFlBQXNDLEVBQUUsSUFBSSxXQUFXLEdBQUcsU0FBUyxRQUFRO0NBR3BGLE9BQ0ksb0JBSFEsTUFBTSxLQUdkO0VBQ0ksR0FBSTtFQUNKLFdBQVcsR0FDUCx1TUFDQSxTQUNKO0VBQ0EsV0FBVztFQUNOO0NBQ1IsQ0FBQTtBQUVULENBQUM7QUFFRCxJQUFBLGlCQUFlLE9BQU8sT0FBTyxRQUFRO0NBQ2pDLGFBQWE7Q0FDYixNQUFNLE9BQU8sT0FBTyxNQUFNLEVBQ3RCLGFBQWEsdUJBQ2pCLENBQUM7Q0FDRCxNQUFNLE9BQU8sT0FBTyxNQUFNO0VBQ3RCLGFBQWE7RUFDYixNQUFNLE9BQU8sT0FBTyxNQUFNLEVBQ3RCLGFBQWEsNEJBQ2pCLENBQUM7Q0FDTCxDQUFDO0FBQ0wsQ0FBQyJ9