@blocklet/ui-react
Version:
Some useful front-end web components that can be used in Blocklets.
85 lines (84 loc) • 2.77 kB
JavaScript
import { jsxs as p, jsx as i } from "react/jsx-runtime";
import { styled as l, Box as g, Typography as s, Skeleton as c } from "@mui/material";
import { Icon as f } from "@iconify/react";
import { Link as u } from "react-router-dom";
const b = (a = "") => a.startsWith("http:") || a.startsWith("https:"), y = (a) => {
try {
return new URL(a).origin === window.location.origin;
} catch {
return !1;
}
}, S = l("span")(({ theme: a, color: n }) => ({
position: "relative",
display: "inline-block",
width: a.spacing(1),
height: a.spacing(1),
borderRadius: "50%",
backgroundColor: n,
marginRight: a.spacing(1)
})), o = l(g)(({ theme: a }) => ({
position: "relative",
display: "inline-flex",
alignItems: "center",
height: a.spacing(3),
paddingLeft: a.spacing(1.5),
paddingRight: a.spacing(1.5),
border: "1px solid",
borderColor: a.palette.divider,
borderRadius: a.shape.borderRadius * 0.5,
fontSize: 12,
overflow: "hidden",
"& .app-badge-label": {
display: "inline-flex",
gap: a.spacing(1),
alignItems: "center",
lineHeight: a.spacing(3),
marginLeft: a.spacing(-1.5),
paddingLeft: a.spacing(1.5),
marginRight: a.spacing(1),
fontSize: 12,
backgroundColor: a.palette.grey[100],
color: a.palette.text.secondary,
"&::after": {
content: '""',
height: a.spacing(3),
borderRight: "1px solid",
borderColor: a.palette.divider,
backgroundColor: a.palette.grey[100]
}
},
"& .app-badge-value": {
color: a.palette.text.primary,
fontSize: 12
}
}));
function x({ loading: a = !1, children: n = null, to: r = "", ...e }) {
const t = /* @__PURE__ */ i(o, { className: "app-badge", component: r ? "a" : "div", href: r, ...e, children: n });
if (a)
return /* @__PURE__ */ i(c, { variant: "rounded", children: t });
if (r) {
if (b(r)) {
const d = y(r) ? "_self" : "_blank";
return /* @__PURE__ */ i(o, { className: "app-badge", component: "a", href: r, target: d, rel: "noreferrer noopener", ...e, children: n });
}
return /* @__PURE__ */ i(o, { className: "app-badge", component: u, to: r, ...e, children: n });
}
return /* @__PURE__ */ i(o, { className: "app-badge", component: "div", ...e, children: n });
}
function h({ icon: a = "", label: n = "", value: r = "", loading: e = !1, ...t }) {
return /* @__PURE__ */ p(x, { loading: e, ...t, children: [
n && /* @__PURE__ */ p(s, { className: "app-badge-label", children: [
a && /* @__PURE__ */ i(f, { icon: a }),
n
] }),
/* @__PURE__ */ i(s, { className: "app-badge-value", children: r })
] });
}
export {
h as AppBadgeDefault,
x as BadgeContainer,
S as StateIcon,
o as StyledBadge,
b as isExternal,
y as isSameOrigin
};