@blocklet/ui-react
Version:
Some useful front-end web components that can be used in Blocklets.
73 lines (72 loc) • 2.56 kB
JavaScript
import { jsxs as l, jsx as e, Fragment as y } from "react/jsx-runtime";
import { useEffect as I, isValidElement as M } from "react";
import { Box as r, Stack as A, Typography as f, useMediaQuery as B } from "@mui/material";
import j from "@arcblock/ux/lib/Tabs";
import w from "./app-badge.js";
import { useAppInfo as C } from "./app-info-context.js";
function b() {
return B((i) => i.breakpoints.down("md"));
}
function h({ sx: t = {} }) {
const i = b();
return /* @__PURE__ */ e(r, { sx: { mx: i ? -2 : -3, borderBottom: "1px solid", borderColor: "divider", mt: 1.5, mb: 1, ...t } });
}
function D({ onTabChange: t = void 0 }) {
const i = b(), {
inService: d,
navItem: n,
icon: m = void 0,
name: p = "",
description: c = void 0,
actions: o = void 0,
badges: x = [],
tabs: a = [],
currentTab: g = "",
updateAppInfo: u
} = C();
return I(() => {
d || u({
name: n?.title || "",
description: n?.description || ""
});
}, [n?.title, n?.description, d, u]), p ? /* @__PURE__ */ l(r, { className: "app-header", sx: { mt: 3, mb: 3 }, children: [
/* @__PURE__ */ l(
r,
{
sx: {
display: "flex",
alignItems: "center",
gap: 1
},
children: [
m && /* @__PURE__ */ e(r, { sx: { display: "flex", alignItems: "center", justifyContent: "center" }, children: m }),
/* @__PURE__ */ l(A, { sx: { flexGrow: 1 }, children: [
/* @__PURE__ */ e(f, { variant: "h1", sx: { mb: 0.5 }, children: p }),
c && /* @__PURE__ */ e(
f,
{
variant: "body2",
color: "text.secondary",
sx: { lineHeight: 1.6, "& a": { color: "primary.main" }, maxWidth: 980 },
children: c
}
)
] }),
!i && o && /* @__PURE__ */ e(r, { sx: { ml: 1 }, children: o })
]
}
),
x.length > 0 && /* @__PURE__ */ e(r, { sx: { display: "flex", flexWrap: "wrap", gap: 1, alignItems: "center", mt: 2 }, children: x.map(
(s, v) => M(s) ? s : /* @__PURE__ */ e(w, { ...s }, s.label || v)
) }),
i && o && /* @__PURE__ */ e(r, { sx: { mt: i ? 2 : 0 }, children: o }),
a.length <= 1 && /* @__PURE__ */ e(h, {}),
a.length > 1 && /* @__PURE__ */ l(y, { children: [
/* @__PURE__ */ e(j, { tabs: a, current: g, onChange: t, scrollButtons: "auto", sx: { mt: 2.5 } }),
/* @__PURE__ */ e(h, { sx: { mt: 0 } })
] })
] }) : null;
}
export {
D as default
};