@blocklet/ui-react
Version:
Some useful front-end web components that can be used in Blocklets.
135 lines (134 loc) • 4.87 kB
JavaScript
import { jsxs as t, jsx as e } from "react/jsx-runtime";
import { Icon as d } from "@iconify/react";
import { useTheme as u, Box as i, Button as a } from "@mui/material";
import r from "prop-types";
function y({ optionalComponent: n, index: p, installStatus: l = "", hasPermission: m, t: s }) {
const { palette: x } = u(), h = () => {
window.open(n?.installUrl, "_blank");
}, f = () => {
window.open(n?.storeUrl, "_blank");
}, g = () => {
window.location.reload();
}, c = l === "stopped" || l === "running", o = 60;
return /* @__PURE__ */ t(i, { children: [
p === 0 ? null : /* @__PURE__ */ e(i, { sx: { width: "100%", height: "1px", backgroundColor: "grey.100" } }),
/* @__PURE__ */ t(
i,
{
sx: {
padding: "20px 24px",
paddingTop: 0.5,
marginTop: 2,
display: "flex",
flexDirection: "row",
justifyContent: "start",
alignItems: "flex-start"
},
children: [
/* @__PURE__ */ e(
"img",
{
style: { width: o, height: o, minWidth: o, minHeight: o },
src: n.logoUrl,
alt: n.meta.title
}
),
/* @__PURE__ */ t(
i,
{
sx: {
display: "flex",
flexDirection: "column",
justifyContent: "start",
alignItems: "start",
marginLeft: 2
},
children: [
/* @__PURE__ */ t(
i,
{
sx: {
fontSize: "16px",
fontWeight: "bold",
cursor: "pointer",
".link-icon": {
opacity: 0
},
":hover .link-icon": {
opacity: 1
}
},
onClick: () => f(n.meta?.did),
children: [
n.meta.title,
/* @__PURE__ */ t(
i,
{
sx: {
paddingLeft: 1,
fontSize: "13px",
fontWeight: "400"
},
component: "span",
children: [
n.meta.version,
/* @__PURE__ */ e(
d,
{
className: "link-icon",
icon: "fluent:open-20-filled",
style: {
color: x.primary.main,
fontSize: 16,
transform: "translate(6px, 3px)",
transition: "all 0.3s"
}
}
)
]
}
)
]
}
),
/* @__PURE__ */ e(i, { sx: { marginTop: 0, opacity: 0.7 }, children: n.meta.description }),
/* @__PURE__ */ e(i, { sx: { display: m ? "flex" : "none", flexDirection: "row", gap: 1 }, children: l ? /* @__PURE__ */ e(i, { sx: { marginTop: 2, opacity: 0.7 }, children: c ? /* @__PURE__ */ e(a, { variant: "contained", onClick: g, children: s("componentInstallerRefresh") }, "refresh") : /* @__PURE__ */ e(
a,
{
disabled: !0,
sx: { color: "text.primary" },
startIcon: /* @__PURE__ */ e(d, { icon: "line-md:loading-loop", style: { color: "text.primary", fontSize: 16 } }),
variant: "contained",
children: l
},
"status"
) }) : /* @__PURE__ */ e(
a,
{
sx: { marginTop: 2 },
variant: "contained",
className: "button",
onClick: () => h(n.meta?.did),
children: s("componentInstallerInstall")
},
"install"
) }),
c ? /* @__PURE__ */ e(i, { sx: { marginTop: 2, opacity: 0.7 }, children: s("componentInstallerSuccessInstalled") }) : null
]
}
)
]
}
)
] });
}
y.propTypes = {
t: r.func.isRequired,
optionalComponent: r.object.isRequired,
index: r.number.isRequired,
installStatus: r.string,
hasPermission: r.bool.isRequired
};
export {
y as default
};