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

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

import { cs } from "../utils/styles.js";
import { useStyleConfig } from "../core/theme.js";
import vui from "../core/vui.js";
import { Box } from "../box/box.js";
import { T } from "../t/t.js";
import { Avatar } from "../avatar/avatar.js";
import { useHeaderContext } from "./context.js";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";

//#region src/header/headerAccountUserInfo.tsx
/** Displays user information, like username and company name, within HeaderAccount part. */
const HeaderAccountUserInfo = vui((props, ref) => {
	const { children, className, color, companyName, displayName, isApplication, role, ...rest } = props;
	const styles = useStyleConfig("Header", useHeaderContext());
	const localColor = color || styles.accountUserInfo.color || "darkBlue.main";
	return /* @__PURE__ */ jsx(Box, {
		className: cs("vui-headerAccountUserInfo", className),
		p: 2,
		pb: 1,
		ref,
		spaceX: 2,
		...styles.accountUserInfo,
		...rest,
		lineHeight: isApplication ? "18px" : "inherit",
		pr: isApplication ? 0 : "inherit",
		textAlign: isApplication ? "right" : "inherit",
		children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [!isApplication && /* @__PURE__ */ jsx(Avatar, {
			className: "vui-headerAccountUserInfoAvatar",
			name: displayName,
			size: "xl",
			variant: "solidDarkBlue"
		}), /* @__PURE__ */ jsxs(Box, {
			column: true,
			rowGap: role ? 0 : .5,
			children: [
				displayName && /* @__PURE__ */ jsx(T, {
					color: localColor,
					fontSize: isApplication ? "12px" : "inherit",
					isTruncated: true,
					pr: 1,
					title: displayName,
					weight: "demi",
					children: displayName
				}),
				companyName && /* @__PURE__ */ jsx(T, {
					color: localColor,
					fontSize: isApplication ? "12px" : "inherit",
					isTruncated: true,
					pr: 1,
					title: companyName,
					children: companyName
				}),
				role && /* @__PURE__ */ jsx(T, {
					color: localColor,
					fontSize: isApplication ? "12px" : "inherit",
					isTruncated: true,
					opacity: .65,
					pr: 1,
					title: role,
					children: role
				})
			]
		})] })
	});
});
HeaderAccountUserInfo.displayName = "HeaderAccountUserInfo";

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