@veracity/vui/dist/header/loggedOutHeader.js

Veracity UI is a React component library crafted for use within Veracity applications and pages. Based on Styled Components and @xstyled.

import { isJsx } from "../utils/assertion.js";
import { cs } from "../utils/styles.js";
import { RenderOnScreen, useDown } from "../core/media.js";
import vui from "../core/vui.js";
import { Box } from "../box/box.js";
import { Header } from "./header.js";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";

//#region src/header/loggedOutHeader.tsx
/** Displays Header content appropriate for logged out users, such as sign in button or create account prompt. */
const LoggedOutHeader = vui((props, ref) => {
	const { applicationName, applicationUrl, children, className, isApplication = false, createAccount, logo, mainLinks, signIn, ...rest } = props;
	if (isApplication) {
		if (!applicationName) console.error("Header: isApplication is true but applicationName is not set.");
	}
	const isSmallScreen = useDown("md");
	const isLessThanMD = useDown("sm");
	const localTextColor = rest?.variant === "dark" ? "white" : "darkBlue.main";
	return /* @__PURE__ */ jsx(Header, {
		className: cs("vui-loggedOutHeader", isApplication ? "vui-loggedOutAppHeader" : void 0, className),
		mb: isApplication && isSmallScreen ? "41px" : "inherited",
		ref,
		...rest,
		children: /* @__PURE__ */ jsxs(Header.Content, { children: [
			(!isApplication || !isLessThanMD) && /* @__PURE__ */ jsxs(Fragment, { children: [" ", isJsx(logo) ? logo : /* @__PURE__ */ jsx(Header.Logo, { ...logo })] }),
			isApplication && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(RenderOnScreen, {
				minWidth: "sm",
				children: /* @__PURE__ */ jsx(Header.Divider, { mr: 2 })
			}), /* @__PURE__ */ jsx(Header.ApplicationName, {
				color: localTextColor,
				title: applicationName,
				url: applicationUrl
			})] }),
			/* @__PURE__ */ jsx(RenderOnScreen, {
				minWidth: "lg",
				children
			}),
			/* @__PURE__ */ jsx(Box, { ml: "auto" }),
			/* @__PURE__ */ jsxs(RenderOnScreen, {
				minWidth: "lg",
				children: [
					isJsx(mainLinks) ? mainLinks : /* @__PURE__ */ jsx(Header.MainLinks, { links: mainLinks }),
					mainLinks !== void 0 && /* @__PURE__ */ jsx(Header.Divider, {
						ml: 1,
						mr: 3
					}),
					isJsx(signIn) ? signIn : /* @__PURE__ */ jsx(Header.SignIn, { ...signIn }),
					isJsx(createAccount) ? createAccount : /* @__PURE__ */ jsx(Header.CreateAccount, { ...createAccount })
				]
			}),
			/* @__PURE__ */ jsxs(RenderOnScreen, {
				maxWidth: "lg",
				children: [
					isJsx(signIn) ? signIn : /* @__PURE__ */ jsx(Header.SignIn, { ...signIn }),
					/* @__PURE__ */ jsx(Header.Divider, { ml: 2 }),
					/* @__PURE__ */ jsx(Header.MobileToggle, {}),
					/* @__PURE__ */ jsxs(Header.MobileContent, { children: [
						children,
						isJsx(createAccount) ? createAccount : /* @__PURE__ */ jsx(Header.CreateAccount, { ...createAccount }),
						isJsx(mainLinks) ? mainLinks : /* @__PURE__ */ jsx(Header.MainLinks, { links: mainLinks })
					] })
				]
			})
		] })
	});
});
LoggedOutHeader.displayName = "LoggedOutHeader";

//#endregion
export { LoggedOutHeader, LoggedOutHeader as default };
globalThis.__vuiVersion__ = "5.3.1"
//# sourceMappingURL=loggedOutHeader.js.map