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

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

import { isJsx, isObject } from "../utils/assertion.js";
import { useStyleConfig } from "../core/theme.js";
import { List } from "../list/list.js";
import { Avatar } from "../avatar/avatar.js";
import Popover from "../popover/popover.js";
import { useHeaderContext } from "./context.js";
import { HeaderAccountUserInfo } from "./headerAccountUserInfo.js";
import { Fragment } from "react";
import { jsx, jsxs } from "react/jsx-runtime";

//#region src/header/headerAccount.tsx
/** Disables popper's dynamic re-positioning */
/** Displays user account information and helpful links, like settings or logout. */
function HeaderAccount(props) {
	const { contentProps, sections, triggerProps, userInfo, ...rest } = props;
	const { isMobile } = useHeaderContext();
	const styles = useStyleConfig("Header", useHeaderContext()).account;
	const name = isObject(userInfo) ? userInfo.displayName : "";
	const variant = styles?.trigger?.variant ?? "solidDarkBlue";
	return /* @__PURE__ */ jsxs(Popover, {
		isLazy: false,
		offset: [isMobile ? 64 : 39, 16],
		placement: "bottom-end",
		...rest,
		children: [/* @__PURE__ */ jsx(Popover.Trigger, {
			as: Avatar,
			className: "vui-headerAccountTrigger",
			isInteractive: true,
			ml: 1,
			name,
			role: "button",
			size: "lg",
			title: "Account",
			variant,
			...styles.trigger,
			...triggerProps
		}), /* @__PURE__ */ jsxs(Popover.Content, {
			borderRadius: 0,
			className: "vui-headerAccountContent",
			column: true,
			...styles.content,
			w: isMobile ? 280 : 320,
			...contentProps,
			children: [isJsx(userInfo) ? userInfo : userInfo && /* @__PURE__ */ jsx(HeaderAccountUserInfo, { ...userInfo }), isJsx(sections) ? sections : sections && /* @__PURE__ */ jsx(List, {
				className: "vui-headerAccountList",
				mb: 2,
				children: sections.map(({ heading, links }, index) => /* @__PURE__ */ jsxs(Fragment, { children: [
					/* @__PURE__ */ jsx(List.Divider, {}),
					heading && /* @__PURE__ */ jsx(List.Heading, { text: heading }),
					links?.map(({ icon, url, ...rest }, index) => /* @__PURE__ */ jsx(List.Item, {
						startIcon: icon,
						linkProps: { href: url },
						...rest
					}, index))
				] }, index))
			})]
		})]
	});
}
HeaderAccount.displayName = "HeaderAccount";

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