@payfit/unity-components
Version:
65 lines (64 loc) • 2.19 kB
JavaScript
import { useRef as e } from "react";
import { uyTv as t } from "@payfit/unity-themes";
import { jsx as n, jsxs as r } from "react/jsx-runtime";
import { useResizeObserver as i } from "usehooks-ts";
//#region src/components/app-layout/AppLayout.tsx
var a = t({
slots: {
body: "uy:min-h-dvh uy:relative uy:flex uy:flex-col uy:pt-(--uy-app-layout-header-sticky-offset)",
header: "uy:fixed uy:top-0 uy:left-0 uy:right-0 uy:z-30",
layoutWrapper: ["uy:flex uy:w-full uy:flex-1 uy:flex-col", "uy:md:flex-row"],
menu: ["uy:sticky uy:top-(--uy-app-layout-header-sticky-offset) uy:z-20 uy:w-full uy:bg-canvas", "uy:md:h-[calc(100dvh-var(--uy-app-layout-header-sticky-offset))] uy:md:max-w-app-menu uy:md:shrink-0"],
contentWrapper: ["uy:flex uy:min-w-0 uy:flex-1 uy:flex-col uy:relative", "uy:md:[&:has([data-unity-page])]:pl-0"],
content: ["uy:flex uy:flex-1 uy:flex-col", "uy:md:[&:has([data-unity-page])]:pr-0 uy:md:[&:has([data-unity-page])]:pt-0"],
footer: "uy:hidden uy:md:block"
},
variants: { withoutContentPadding: {
false: {
content: [
"uy:md:pr-300",
"uy:md:pt-250",
"&:has()"
],
contentWrapper: ["uy:md:pl-100"]
},
true: {
content: [],
contentWrapper: []
}
} }
});
function o({ children: t, menu: o, header: s, footer: c, withoutContentPadding: l = !1 }) {
let u = e(null), { height: d = 0 } = i({
ref: u,
box: "border-box"
}), { body: f, header: p, menu: m, layoutWrapper: h, contentWrapper: g, content: _, footer: v } = a({ withoutContentPadding: l }), y = { "--uy-app-layout-header-sticky-offset": `${d}px` };
return /* @__PURE__ */ r("div", {
className: f(),
style: y,
children: [s && /* @__PURE__ */ n("div", {
ref: u,
className: p(),
role: "alert",
"aria-live": "assertive",
children: s
}), /* @__PURE__ */ r("div", {
className: h(),
children: [o && /* @__PURE__ */ n("div", {
className: m(),
children: o
}), /* @__PURE__ */ r("div", {
className: g(),
children: [/* @__PURE__ */ n("div", {
className: _(),
children: t
}), c && /* @__PURE__ */ n("footer", {
className: v(),
children: c
})]
})]
})]
});
}
//#endregion
export { o as AppLayout };