@veracity/vui/dist/header/headerNotifications.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 { Badge } from "../badge/badge.js";
import { Button } from "../button/button.js";
import { useHeaderContext } from "./context.js";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";

//#region src/header/headerNotifications.tsx
/** Icon link to Veracity notifications engine with an optional number of new notifications. */
const HeaderNotifications = vui((props, ref) => {
	const { children, className, count = 0, url, ...rest } = props;
	const { links } = useHeaderContext() ?? {};
	const styles = useStyleConfig("Header", useHeaderContext()).notifications;
	return /* @__PURE__ */ jsx(Button, {
		as: "a",
		className: cs("vui-headerNotifications", className),
		href: url ?? links.notifications,
		minW: 0,
		position: "relative",
		px: "9px",
		ref,
		size: "lg",
		title: "Notifications",
		variant: "tertiary",
		...styles.container,
		...rest,
		w: "40px",
		overflow: "visible",
		children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Button.Icon, { name: "uiBell" }), count > 0 && /* @__PURE__ */ jsx(Badge, {
			"aria-label": `${count} new notifications`,
			size: "xs",
			variant: "solid",
			color: "red",
			position: "absolute",
			top: -3,
			right: -3,
			maxW: "20px",
			children: count < 10 ? count : "9+"
		})] })
	});
});
HeaderNotifications.displayName = "HeaderNotifications";

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