@undp/design-system-react/dist/PageHeader.js

React based design system for UNDP

import { t as e } from "./utils-ca9as9Ye.js";
import * as t from "react";
import { jsx as n, jsxs as r } from "react/jsx-runtime";
//#region src/components/ui/page-header.tsx
var i = t.forwardRef(({ className: t, style: i, backgroundImage: a, variant: o, minHeight: s = !0, contentMode: c = "dark", children: l, ...u }, d) => o === "secondary" ? /* @__PURE__ */ n("div", {
	className: "@container w-full",
	children: /* @__PURE__ */ r("div", {
		ref: d,
		className: e("relative isolate flex w-full @2xl:flex-row flex-col @2xl:items-stretch", c === "dark" ? "text-content-reverse" : "text-content-primary", s ? s === !0 ? "@2xl:min-h-160.5 @5xl:min-h-186.5 min-h-auto" : s : "", t),
		style: i,
		...u,
		children: [
			/* @__PURE__ */ n("div", {
				className: "absolute inset-0 @2xl:hidden bg-center bg-cover",
				style: { backgroundImage: a ? `url(${a})` : "none" }
			}),
			/* @__PURE__ */ n("div", {
				className: "relative flex @2xl:w-1/2 w-full flex-col gap-4 py-20 @2xl:pl-[8.3333%] pl-4 @2xl:rtl:pr-0 rtl:pr-4 rtl:pl-0",
				children: l
			}),
			/* @__PURE__ */ n("div", {
				className: "@2xl:block hidden @2xl:w-1/2 bg-center bg-cover",
				style: { backgroundImage: a ? `url(${a})` : "none" }
			})
		]
	})
}) : /* @__PURE__ */ n("div", {
	className: "@container w-full",
	children: /* @__PURE__ */ n("div", {
		ref: d,
		className: e(`${c} flex w-full flex-col gap-4 bg-center bg-cover py-20 @2xl:pl-[8.3333%] pl-4 @2xl:rtl:pr-[8.3333%] rtl:pr-4 @2xl:rtl:pl-0 rtl:pl-0`, s ? s === !0 ? "@2xl:min-h-160.5 @5xl:min-h-186.5 min-h-auto" : s : "", c === "dark" ? "text-content-reverse" : "text-content-primary", t),
		style: {
			...i,
			backgroundImage: a ? `url(${a})` : "none"
		},
		...u,
		children: l
	})
}));
i.displayName = "PageHeader";
var a = t.forwardRef(({ className: t, ...r }, i) => /* @__PURE__ */ n("div", {
	ref: i,
	className: e("@2xl:px-4 px-4 @2xl:py-4 py-0", t),
	...r
}));
a.displayName = "PageHeaderHead";
var o = t.forwardRef(({ className: t, ...r }, i) => /* @__PURE__ */ n("div", {
	ref: i,
	className: e("flex @2xl:w-[66.667%] w-full grow flex-col justify-center gap-6 p-4", t),
	...r
}));
o.displayName = "PageHeaderContent";
//#endregion
export { i as PageHeader, o as PageHeaderContent, a as PageHeaderHead };

//# sourceMappingURL=PageHeader.js.map