@blocklet/ui-react
Version:
Some useful front-end web components that can be used in Blocklets.
93 lines (92 loc) • 2.67 kB
JavaScript
import { jsxs as l, jsx as r } from "react/jsx-runtime";
import { Box as t, Tooltip as o, Typography as n, Chip as d } from "@mui/material";
import f from "@arcblock/ux/lib/Avatar";
import { useCreation as c } from "ahooks";
function g({ user: i, sessionUser: e }) {
const a = c(() => (i?.passports || [])?.find((p) => p.name === e.role), [i?.passports, e?.role]);
return /* @__PURE__ */ l(
t,
{
sx: {
display: "flex",
alignItems: "center",
gap: 1
},
children: [
/* @__PURE__ */ r(
f,
{
size: 40,
variant: "circle",
shape: "circle",
src: e.avatar,
did: e.did,
sx: { flexShrink: 0 }
}
),
/* @__PURE__ */ l(t, { sx: { flex: 1, overflow: "hidden" }, children: [
/* @__PURE__ */ l(
t,
{
sx: {
display: "flex",
alignItems: "center",
gap: 1
},
children: [
/* @__PURE__ */ r(o, { title: e.fullName, children: /* @__PURE__ */ r(
n,
{
sx: {
whiteSpace: "nowrap",
overflow: "hidden",
textOverflow: "ellipsis",
flex: 1
},
children: e.fullName
}
) }),
/* @__PURE__ */ r(
d,
{
label: a?.title || a?.name || "Guest",
size: "small",
variant: "outlined",
sx: {
flexShrink: 0,
fontWeight: "bold",
fontSize: "12px",
color: "text.primary",
borderColor: "grey.300",
backgroundColor: "transparent",
textTransform: "capitalize",
pr: 0.5,
pl: 0,
height: "auto"
}
}
)
]
}
),
/* @__PURE__ */ r(o, { title: e.email, children: /* @__PURE__ */ r(
n,
{
variant: "body2",
color: "grey",
sx: {
whiteSpace: "nowrap",
overflow: "hidden",
textOverflow: "ellipsis"
},
children: e.email
}
) })
] })
]
}
);
}
export {
g as default
};