diff --git a/src/components/common/AbstractCard.tsx b/src/components/common/AbstractCard.tsx index 53386c3..5e25d56 100644 --- a/src/components/common/AbstractCard.tsx +++ b/src/components/common/AbstractCard.tsx @@ -4,6 +4,8 @@ import { useBoolean } from "usehooks-ts"; import { LinkIcon, CodeBracketIcon, + DocumentArrowDownIcon, + ClipboardDocumentIcon, } from "@heroicons/react/24/outline"; type AbstractCardProps = { @@ -28,12 +30,6 @@ const AbstractCard: FunctionComponent = ({ {header != undefined || data != undefined ? (
{header}
- {data != undefined ? ( -
- {url != undefined ? (
@@ -41,6 +37,47 @@ const AbstractCard: FunctionComponent = ({
) : null} + {data != undefined ? ( + <> +
+ { + // stringify the JSON object, then begin the async clipboard write + navigator.clipboard.writeText(JSON.stringify(data, null, 4)).then(() => { + console.log('Copied to clipboard.'); + }, (err) => { + if (err instanceof Error) + console.error(`Failed to copy to clipboard (${err.toString()}).`); + else + console.error("Failed to copy to clipboard."); + }); + }} + className="h-6 w-6 cursor-pointer" + /> +
+
+ { + const file = new Blob([JSON.stringify(data, null, 4)], { + type: "application/json", + }); + + const anchor = document.createElement("a"); + anchor.href = URL.createObjectURL(file); + anchor.download = "response.json"; + anchor.click(); + }} + className="h-6 w-6 cursor-pointer" + /> +
+
+ +
+ + ) : null}
) : null}