75 lines
2.3 KiB
TypeScript
75 lines
2.3 KiB
TypeScript
import { useState } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import Modal from "../modals/Modal";
|
|
import clsx from "clsx";
|
|
import toast from "react-hot-toast";
|
|
|
|
export default function ShowPayloadModalButton({
|
|
payload,
|
|
title,
|
|
description,
|
|
withCopy = true,
|
|
className,
|
|
size = "xl",
|
|
}: {
|
|
payload: string;
|
|
title?: string;
|
|
description?: React.ReactNode;
|
|
withCopy?: boolean;
|
|
className?: string;
|
|
size?: "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "full";
|
|
}) {
|
|
const { t } = useTranslation();
|
|
const [open, setOpen] = useState(false);
|
|
|
|
function stringifyDetails() {
|
|
if (typeof payload === "string") {
|
|
return payload;
|
|
}
|
|
try {
|
|
return JSON.stringify(JSON.parse(payload ?? "{}"), null, "\t");
|
|
} catch (e) {
|
|
return JSON.stringify(payload, null, "\t");
|
|
}
|
|
}
|
|
return (
|
|
<>
|
|
<div className="flex space-x-2">
|
|
{payload !== null && (
|
|
<button
|
|
type="button"
|
|
onClick={() => setOpen(true)}
|
|
className={clsx(className, "hover:border-theme-400 border-border-default border-b border-dotted hover:border-dashed")}
|
|
>
|
|
{/* {t("models.log.details")} */}
|
|
{description ?? JSON.stringify(payload)}
|
|
</button>
|
|
)}
|
|
</div>
|
|
|
|
<Modal size={size} open={open} setOpen={setOpen}>
|
|
<div className="flex justify-between space-x-2">
|
|
<div className="text-text-neutral-primary text-lg font-medium">{title ?? t("shared.details")}</div>
|
|
<div>
|
|
{withCopy && (
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
navigator.clipboard.writeText(stringifyDetails());
|
|
toast.success(t("shared.copied"));
|
|
}}
|
|
className="bg-theme-100 text-theme-700 hover:bg-theme-200 focus:shadow-focus inline-flex items-center rounded-md border border-transparent px-3 py-2 text-sm font-medium leading-4 focus:outline-hidden"
|
|
>
|
|
{t("shared.copy")}
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div className="prose bg-foreground/90 border-border-default mt-2 max-h-96 overflow-auto rounded-lg border-2 border-dashed">
|
|
<pre>{stringifyDetails()}</pre>
|
|
</div>
|
|
</Modal>
|
|
</>
|
|
);
|
|
}
|