synapse-react-client
Version:
[](https://badge.fury.io/js/synapse-react-client) [](https://github.com/prettier/prettie
103 lines (102 loc) • 4.11 kB
JavaScript
import { jsxs as o, jsx as a } from "react/jsx-runtime";
import { Button as g, Dialog as v, DialogTitle as k, IconButton as B, DialogContent as C, Box as L, Typography as r, Input as T } from "@mui/material";
import { useState as p, useEffect as P } from "react";
import w from "@mui/icons-material/Close";
import { CopyToClipboardIcon as x } from "../CopyToClipboardIcon.js";
import { LinkedinShareButton as z, LinkedinIcon as U, TwitterShareButton as D, XIcon as X, BlueskyShareButton as j, BlueskyIcon as E } from "react-share";
import e from "./ShareThisPage.module.scss.js";
import { ShareTwoTone as O } from "@mui/icons-material";
import { useCreateShortUrl as R } from "../../utils/hooks/useCreateShortUrl.js";
const Q = ({
shortIoPublicApiKey: I,
domain: f = "sageb.io",
renderAs: N = "button",
open: t,
onClose: c
}) => {
const [n, d] = p(""), [y, h] = p(!1), l = t === void 0, s = l ? y : t, S = () => {
l && h(!0);
}, m = () => {
l && h(!1), c && c();
}, { mutate: u, isPending: b } = R({
shortIoPublicApiKey: I,
domain: f,
onSuccess: (i) => {
d(i);
},
onError: (i) => {
console.error(i), d(window.location.href);
}
});
return P(() => {
s && u();
}, [s, u]), /* @__PURE__ */ o("div", { children: [
N === "button" && /* @__PURE__ */ a(
g,
{
variant: "outlined",
endIcon: /* @__PURE__ */ a(O, { className: e.shareIcon }),
onClick: S,
children: "Share"
}
),
/* @__PURE__ */ o(
v,
{
open: s,
onClose: m,
maxWidth: "xs",
className: e.dialogPaper,
children: [
/* @__PURE__ */ o(k, { className: e.dialogTitle, children: [
"Share this page",
/* @__PURE__ */ a(B, { onClick: m, size: "small", children: /* @__PURE__ */ a(w, { className: e.closeIcon }) })
] }),
/* @__PURE__ */ a(C, { className: e.dialogContent, children: /* @__PURE__ */ o(L, { className: e.contentStack, children: [
/* @__PURE__ */ o("div", { className: e.shareButtonsContainer, children: [
/* @__PURE__ */ a(z, { url: n, "aria-label": "Share on LinkedIn", children: /* @__PURE__ */ o("div", { className: e.shareItem, children: [
/* @__PURE__ */ a(U, { size: 48, round: !0 }),
/* @__PURE__ */ a(r, { variant: "body1", className: e.shareItemLabel, children: "LinkedIn" })
] }) }),
/* @__PURE__ */ a(D, { url: n, "aria-label": "Share on X", children: /* @__PURE__ */ o("div", { className: e.shareItem, children: [
/* @__PURE__ */ a(X, { size: 48, round: !0 }),
/* @__PURE__ */ a(r, { variant: "body1", className: e.shareItemLabel, children: "X" })
] }) }),
/* @__PURE__ */ a(j, { url: n, "aria-label": "Share on Bluesky", children: /* @__PURE__ */ o("div", { className: e.shareItem, children: [
/* @__PURE__ */ a(E, { size: 48, round: !0 }),
/* @__PURE__ */ a(r, { variant: "body1", className: e.shareItemLabel, children: "Bluesky" })
] }) })
] }),
/* @__PURE__ */ o("div", { className: e.copySection, children: [
/* @__PURE__ */ a(r, { className: e.copyLabel, children: "Page Link" }),
/* @__PURE__ */ o("div", { className: e.copyRow, children: [
/* @__PURE__ */ a(
T,
{
className: e.urlInput,
value: n,
readOnly: !0,
"aria-label": "Page URL",
placeholder: b ? "Generating link..." : ""
}
),
/* @__PURE__ */ a(
x,
{
value: n,
sizePx: 24,
className: e.copyButton
}
)
] })
] })
] }) })
]
}
)
] });
};
export {
Q as default
};
//# sourceMappingURL=ShareThisPage.js.map