60 lines
1.8 KiB
TypeScript
60 lines
1.8 KiB
TypeScript
import React from "react";
|
|
import Icon from "./Icon";
|
|
import { generateDialog } from "./Dialog";
|
|
import copy from "copy-to-clipboard";
|
|
import toastHelper from "./Toast";
|
|
|
|
interface Props extends DialogProps {
|
|
memoId: MemoId;
|
|
}
|
|
|
|
const EmbedMemoDialog: React.FC<Props> = (props: Props) => {
|
|
const { memoId, destroy } = props;
|
|
|
|
const memoEmbeddedCode = () => {
|
|
return `<iframe style="width:100%;height:auto;min-width:256px;" src="${window.location.origin}/m/${memoId}/embed" frameBorder="0"></iframe>`;
|
|
};
|
|
|
|
const handleCopyCode = () => {
|
|
copy(memoEmbeddedCode());
|
|
toastHelper.success("Succeed to copy code to clipboard.");
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<div className="dialog-header-container">
|
|
<p className="title-text">Embed Memo</p>
|
|
<button className="btn close-btn" onClick={() => destroy()}>
|
|
<Icon.X />
|
|
</button>
|
|
</div>
|
|
<div className="dialog-content-container !w-80">
|
|
<p className="text-base leading-6 mb-2">Copy and paste the below codes into your blog or website.</p>
|
|
<pre className="w-full font-mono text-sm p-3 border rounded-lg">
|
|
<code className="w-full break-all whitespace-pre-wrap">{memoEmbeddedCode()}</code>
|
|
</pre>
|
|
<p className="w-full text-sm leading-6 flex flex-row justify-between items-center mt-2">
|
|
<span className="italic opacity-80">* Only the public memo supports.</span>
|
|
<span className="btn-primary" onClick={handleCopyCode}>
|
|
Copy
|
|
</span>
|
|
</p>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
function showEmbedMemoDialog(memoId: MemoId) {
|
|
generateDialog(
|
|
{
|
|
className: "embed-memo-dialog",
|
|
dialogName: "embed-memo-dialog",
|
|
},
|
|
EmbedMemoDialog,
|
|
{
|
|
memoId,
|
|
}
|
|
);
|
|
}
|
|
|
|
export default showEmbedMemoDialog;
|