@blocklet/ui-react
Version:
Some useful front-end web components that can be used in Blocklets.
80 lines (79 loc) • 2.28 kB
JavaScript
import { jsxs as a, Fragment as d, jsx as e } from "react/jsx-runtime";
import { useState as n } from "react";
import m from "react-placeholder";
import { Dialog as f, DialogContent as u, IconButton as g } from "@mui/material";
import { CloseOutlined as y } from "@mui/icons-material";
import s from "./icons/empty-spaces-nft.svg.js";
function k({ src: t, alt: p }) {
const [o, c] = n(!1), [h, i] = n(!1), r = () => i(!0), l = () => i(!1);
return /* @__PURE__ */ a(d, { children: [
/* @__PURE__ */ e(
m,
{
ready: o,
customPlaceholder: (
// eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
/* @__PURE__ */ e(
"img",
{
style: { cursor: "pointer" },
alt: p,
src: t,
width: "58px",
height: "58px",
onError: () => c(!0),
onClick: r
}
)
),
children: /* @__PURE__ */ e(s, { style: { cursor: "pointer", width: "58px", height: "58px" }, onClick: r })
}
),
/* @__PURE__ */ e(
f,
{
open: h,
onClose: l,
"aria-labelledby": "preview-space-nft-display",
"aria-describedby": "preview space nft display",
fullWidth: !0,
maxWidth: "md",
children: /* @__PURE__ */ a(u, { style: { padding: "8px 8px", backgroundColor: "rgba(0,0,0,0.8)" }, children: [
/* @__PURE__ */ e(
g,
{
color: "inherit",
onClick: l,
"aria-label": "close",
style: { position: "absolute", top: 8, right: 8, color: "white" },
children: /* @__PURE__ */ e(y, {})
}
),
o ? /* @__PURE__ */ e(
s,
{
style: {
width: "100%",
height: "75vh"
}
}
) : /* @__PURE__ */ e(
"img",
{
src: t,
alt: "",
style: {
width: "100%",
height: "75vh",
objectFit: "contain"
}
}
)
] })
}
)
] });
}
export {
k as default
};