@nordcom/nordstar-header
Version:
Generic simple component to render headers for landing pages and similar.
72 lines (71 loc) • 10.3 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 = ({ sticky = true, className, children, ...props }) => {
return /* @__PURE__ */ jsx(Card, {
...props,
as: "header",
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", 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("md:overflow-x 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-base font-extrabold text-sm uppercase leading-none transition-colors hover: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+O1xuXG5jb25zdCBIZWFkZXIgPSAoeyBzdGlja3kgPSB0cnVlLCBjbGFzc05hbWUsIGNoaWxkcmVuLCAuLi5wcm9wcyB9OiBIZWFkZXJQcm9wcykgPT4ge1xuICAgIHJldHVybiAoXG4gICAgICAgIDxDYXJkXG4gICAgICAgICAgICB7Li4ucHJvcHN9XG4gICAgICAgICAgICBhcz1cImhlYWRlclwiXG4gICAgICAgICAgICBib3JkZXJsZXNzPXt0cnVlfVxuICAgICAgICAgICAgY2xhc3NOYW1lPXtjbihcbiAgICAgICAgICAgICAgICAnei0xMCBtYi0zIGZsZXggbWluLWgtMjAgdy1mdWxsIGZsZXgtMSBncm93IGl0ZW1zLWNlbnRlciBqdXN0aWZ5LWNlbnRlciByb3VuZGVkLW5vbmUgYm9yZGVyLTAgYm9yZGVyLW5vbmUgYmctYmFja2dyb3VuZC85NSBiYWNrZHJvcC1ibHVyIHN1cHBvcnRzLVtiYWNrZHJvcC1maWx0ZXJdOmJnLWJhY2tncm91bmQvNzUgbWQ6aC0yMCcsXG4gICAgICAgICAgICAgICAgc3RpY2t5ICYmXG4gICAgICAgICAgICAgICAgICAgICdzdGlja3kgaW5zZXQtMCBib3R0b20tYXV0byB6LTQwIGJvcmRlci0wIGJvcmRlci1iYWNrZ3JvdW5kLWhpZ2hsaWdodCBib3JkZXItYi0yIGJvcmRlci1zb2xpZCcsXG4gICAgICAgICAgICAgICAgY2xhc3NOYW1lLFxuICAgICAgICAgICAgKX1cbiAgICAgICAgICAgIGRhdGEtc3RpY2t5PXtzdGlja3l9XG4gICAgICAgID5cbiAgICAgICAgICAgIDxWaWV3XG4gICAgICAgICAgICAgICAgYXM9XCJkaXZcIlxuICAgICAgICAgICAgICAgIGNsYXNzTmFtZT17Y24oXG4gICAgICAgICAgICAgICAgICAgICdtLTAgZ3JpZCBoLWZ1bGwgdy1mdWxsIG1heC13LSgtLW5vcmRzdGFyLWxheW91dC1wYWdlLXdpZHRoKSBncmlkLWNvbHMtWzFmcl0gaXRlbXMtY2VudGVyIGp1c3RpZnktY2VudGVyIGdhcC0zIGJvcmRlci0wIGJvcmRlci1ub25lIHAtMCBtZDpncmlkLWNvbHMtWzFmcl9hdXRvXScsXG4gICAgICAgICAgICAgICAgKX1cbiAgICAgICAgICAgICAgICB3aXRob3V0V3JhcHBlcj17dHJ1ZX1cbiAgICAgICAgICAgID5cbiAgICAgICAgICAgICAgICB7Y2hpbGRyZW59XG4gICAgICAgICAgICA8L1ZpZXc+XG4gICAgICAgIDwvQ2FyZD5cbiAgICApO1xufTtcblxuZXhwb3J0IHR5cGUgSGVhZGVyTG9nb1Byb3BzID0ge1xuICAgIGFzPzogQXM7XG59ICYgQ29tcG9uZW50UHJvcHM8J25hdic+O1xuXG4vKipcbiAqIGA8SGVhZGVyLkxvZ28vPmAsIGEgY29tcG9uZW50IHRvIHJlbmRlciBhIGhlYWRlcidzIGxvZ28uXG4gKiBAcGFyYW0ge0hlYWRlckxvZ29Qcm9wc30gcHJvcHMgLSBgPEhlYWRlci5Mb2dvLz5gIHByb3BzLlxuICogQHJldHVybnMge1JlYWN0LlJlYWN0Tm9kZX0gVGhlIGA8SGVhZGVyLkxvZ28vPmAgY29tcG9uZW50LlxuICovXG5jb25zdCBMb2dvID0gZm9yd2FyZFJlZjwnc2VjdGlvbicsIEhlYWRlckxvZ29Qcm9wcz4oKHsgYXMsIGNsYXNzTmFtZSwgLi4ucHJvcHMgfSwgcmVmKSA9PiB7XG4gICAgY29uc3QgVGFnID0gYXMgfHwgJ3NlY3Rpb24nO1xuICAgIHJldHVybiAoXG4gICAgICAgIDxUYWdcbiAgICAgICAgICAgIHsuLi5wcm9wc31cbiAgICAgICAgICAgIGNsYXNzTmFtZT17Y24oXG4gICAgICAgICAgICAgICAgJ2ZvbnQtZXh0cmFib2xkIHRleHQtbGcgdXBwZXJjYXNlICo6aC1mdWxsICo6b2JqZWN0LWNvbnRhaW4gKjpvYmplY3QtbGVmdCBbJj5hXTp0cmFuc2l0aW9uLWNvbG9ycyBbJj5hXTpob3Zlcjp0ZXh0LXByaW1hcnknLFxuICAgICAgICAgICAgICAgIGNsYXNzTmFtZSxcbiAgICAgICAgICAgICl9XG4gICAgICAgICAgICBkcmFnZ2FibGU9e2ZhbHNlfVxuICAgICAgICAgICAgcmVmPXtyZWZ9XG4gICAgICAgIC8+XG4gICAgKTtcbn0pO1xuXG5leHBvcnQgdHlwZSBIZWFkZXJNZW51UHJvcHMgPSB7XG4gICAgYXM/OiBBcztcbiAgICBvdmVyZmxvd1NoYWRvdz86IGJvb2xlYW47XG59O1xuXG4vKipcbiAqIGA8SGVhZGVyLk1lbnUvPmAsIGEgY29tcG9uZW50IHRvIHJlbmRlciBhIGhlYWRlcidzIGNvbnRlbnQuXG4gKiBAcGFyYW0ge0hlYWRlck1lbnVQcm9wc30gcHJvcHMgLSBgPEhlYWRlci5NZW51Lz5gIHByb3BzLlxuICogQHJldHVybnMge1JlYWN0LlJlYWN0Tm9kZX0gVGhlIGA8SGVhZGVyLk1lbnUvPmAgY29tcG9uZW50LlxuICovXG5jb25zdCBNZW51ID0gZm9yd2FyZFJlZjwnbmF2JywgSGVhZGVyTWVudVByb3BzPigoeyBhcywgY2xhc3NOYW1lLCBvdmVyZmxvd1NoYWRvdyA9IHRydWUsIC4uLnByb3BzIH0sIHJlZikgPT4ge1xuICAgIGNvbnN0IFRhZyA9IGFzIHx8ICduYXYnO1xuXG4gICAgcmV0dXJuIChcbiAgICAgICAgPFRhZ1xuICAgICAgICAgICAgey4uLnByb3BzfVxuICAgICAgICAgICAgY2xhc3NOYW1lPXtjbihcbiAgICAgICAgICAgICAgICAnbWQ6b3ZlcmZsb3cteCBmbGV4IHctZnVsbCB0b3VjaC1hdXRvIHNlbGVjdC1ub25lIGl0ZW1zLWNlbnRlciBnYXAtNiBvdmVyZmxvdy14LWF1dG8gc2Nyb2xsLXNtb290aCBweS0zIG1kOmp1c3RpZnktZW5kJyxcbiAgICAgICAgICAgICAgICBvdmVyZmxvd1NoYWRvdyAmJiAnYW5pbWF0ZS1zY3JvbGwtc2hhZG93LWluc2V0IFthbmltYXRpb24tdGltZWxpbmU6c2Nyb2xsKHNlbGZfaW5saW5lKV0nLFxuICAgICAgICAgICAgICAgIGNsYXNzTmFtZSxcbiAgICAgICAgICAgICl9XG4gICAgICAgICAgICBkYXRhLW92ZXJmbG93LXNoYWRvdz17b3ZlcmZsb3dTaGFkb3d9XG4gICAgICAgICAgICBkcmFnZ2FibGU9e2ZhbHNlfVxuICAgICAgICAgICAgcmVmPXtyZWZ9XG4gICAgICAgIC8+XG4gICAgKTtcbn0pO1xuXG5leHBvcnQgdHlwZSBIZWFkZXJNZW51TGlua1Byb3BzID0ge1xuICAgIGFzPzogQXM7XG59O1xuXG4vKipcbiAqIGA8SGVhZGVyLk1lbnUuTGluay8+YCwgYSBjb21wb25lbnQgdG8gcmVuZGVyIGhlYWRlciBsaW5rcy5cbiAqIEBwYXJhbSB7SGVhZGVyTWVudUxpbmtQcm9wc30gcHJvcHMgLSBgPEhlYWRlci5NZW51LkxpbmsvPmAgcHJvcHMuXG4gKiBAcmV0dXJucyB7UmVhY3QuUmVhY3ROb2RlfSBUaGUgYDxIZWFkZXIuTWVudS5MaW5rLz5gIGNvbXBvbmVudC5cbiAqL1xuY29uc3QgTGluayA9IGZvcndhcmRSZWY8J2EnLCBIZWFkZXJNZW51TGlua1Byb3BzPigoeyBhcywgY2xhc3NOYW1lLCAuLi5wcm9wcyB9LCByZWYpID0+IHtcbiAgICBjb25zdCBUYWcgPSBhcyB8fCAnYSc7XG5cbiAgICByZXR1cm4gKFxuICAgICAgICA8VGFnXG4gICAgICAgICAgICB7Li4ucHJvcHN9XG4gICAgICAgICAgICBjbGFzc05hbWU9e2NuKFxuICAgICAgICAgICAgICAgICdjdXJzb3ItcG9pbnRlciB3aGl0ZXNwYWNlLW5vd3JhcCBicmVhay1hbGwgZm9udC1iYXNlIGZvbnQtZXh0cmFib2xkIHRleHQtc20gdXBwZXJjYXNlIGxlYWRpbmctbm9uZSB0cmFuc2l0aW9uLWNvbG9ycyBob3Zlcjp0ZXh0LXByaW1hcnkgYWN0aXZlOnRleHQtcHJpbWFyeSBtZDp0ZXh0LWJhc2UnLFxuICAgICAgICAgICAgICAgIGNsYXNzTmFtZSxcbiAgICAgICAgICAgICl9XG4gICAgICAgICAgICBkcmFnZ2FibGU9e2ZhbHNlfVxuICAgICAgICAgICAgcmVmPXtyZWZ9XG4gICAgICAgIC8+XG4gICAgKTtcbn0pO1xuXG5leHBvcnQgZGVmYXVsdCBPYmplY3QuYXNzaWduKEhlYWRlciwge1xuICAgIGRpc3BsYXlOYW1lOiAnTm9yZHN0YXIuSGVhZGVyJyxcbiAgICBMb2dvOiBPYmplY3QuYXNzaWduKExvZ28sIHtcbiAgICAgICAgZGlzcGxheU5hbWU6ICdOb3Jkc3Rhci5IZWFkZXIuTG9nbycsXG4gICAgfSksXG4gICAgTWVudTogT2JqZWN0LmFzc2lnbihNZW51LCB7XG4gICAgICAgIGRpc3BsYXlOYW1lOiAnTm9yZHN0YXIuSGVhZGVyLk1lbnUnLFxuICAgICAgICBMaW5rOiBPYmplY3QuYXNzaWduKExpbmssIHtcbiAgICAgICAgICAgIGRpc3BsYXlOYW1lOiAnTm9yZHN0YXIuSGVhZGVyLk1lbnUuTGluaycsXG4gICAgICAgIH0pLFxuICAgIH0pLFxufSk7XG4iXSwibWFwcGluZ3MiOiI7Ozs7O0FBV0EsSUFBTSxVQUFVLEVBQUUsU0FBUyxNQUFNLFdBQVcsVUFBVSxHQUFHLFlBQXlCO0NBQzlFLE9BQ0ksb0JBQUMsTUFBRDtFQUNJLEdBQUk7RUFDSixJQUFHO0VBQ0gsWUFBWTtFQUNaLFdBQVcsR0FDUCwrTEFDQSxVQUNJLGdHQUNKLFVBQ0g7RUFDRCxlQUFhO1lBRWIsb0JBQUMsTUFBRDtHQUNJLElBQUc7R0FDSCxXQUFXLEdBQ1AsaUtBQ0g7R0FDRCxnQkFBZ0I7R0FFZjtHQUNFLENBQUE7RUFDSixDQUFBOzs7Ozs7O0FBYWYsSUFBTSxPQUFPLFlBQXdDLEVBQUUsSUFBSSxXQUFXLEdBQUcsU0FBUyxRQUFRO0NBRXRGLE9BQ0ksb0JBRlEsTUFBTSxXQUVkO0VBQ0ksR0FBSTtFQUNKLFdBQVcsR0FDUCw2SEFDQSxVQUNIO0VBQ0QsV0FBVztFQUNOO0VBQ1AsQ0FBQTtFQUVSOzs7Ozs7QUFZRixJQUFNLE9BQU8sWUFBb0MsRUFBRSxJQUFJLFdBQVcsaUJBQWlCLE1BQU0sR0FBRyxTQUFTLFFBQVE7Q0FHekcsT0FDSSxvQkFIUSxNQUFNLE9BR2Q7RUFDSSxHQUFJO0VBQ0osV0FBVyxHQUNQLHlIQUNBLGtCQUFrQix3RUFDbEIsVUFDSDtFQUNELHdCQUFzQjtFQUN0QixXQUFXO0VBQ047RUFDUCxDQUFBO0VBRVI7Ozs7OztBQVdGLElBQU0sT0FBTyxZQUFzQyxFQUFFLElBQUksV0FBVyxHQUFHLFNBQVMsUUFBUTtDQUdwRixPQUNJLG9CQUhRLE1BQU0sS0FHZDtFQUNJLEdBQUk7RUFDSixXQUFXLEdBQ1AsNEtBQ0EsVUFDSDtFQUNELFdBQVc7RUFDTjtFQUNQLENBQUE7RUFFUjtBQUVGLElBQUEsaUJBQWUsT0FBTyxPQUFPLFFBQVE7Q0FDakMsYUFBYTtDQUNiLE1BQU0sT0FBTyxPQUFPLE1BQU0sRUFDdEIsYUFBYSx3QkFDaEIsQ0FBQztDQUNGLE1BQU0sT0FBTyxPQUFPLE1BQU07RUFDdEIsYUFBYTtFQUNiLE1BQU0sT0FBTyxPQUFPLE1BQU0sRUFDdEIsYUFBYSw2QkFDaEIsQ0FBQztFQUNMLENBQUM7Q0FDTCxDQUFDIn0=