ldc-ovoteam/resources/ts/back/Components/PageConfigs/ExportConfigJson.tsx

55 lines
1.4 KiB
TypeScript

import { FileDownIcon } from "lucide-react";
import BtnOptionnalLinkWithTooltip from "@/back/Components/BtnOptionnalLinkWithTooltip";
interface ExportConfigJsonProps<T> {
// The data in string.
data: T;
// Name of the downloaded file.
filename?: string;
// String present in the tooltip.
tooltipContent: string;
// Disable the button or not.
disabled?: boolean;
}
export default function ExportConfigJson<T>({
data,
filename = "config.json",
tooltipContent,
disabled = false,
}: ExportConfigJsonProps<T>) {
const handleExport = () => {
try {
// Transform data into json structure.
const json = JSON.stringify(data, null);
// Create blob from the json.
const blob = new Blob([json], {
type: "application/json;charset=utf-8",
});
// Creates a link on the fly and opens it.
const url = URL.createObjectURL(blob);
const link = document.createElement("a");
link.href = url;
link.download = filename;
link.click();
URL.revokeObjectURL(url);
} catch (error) {
console.error("Error during JSON export:", error);
}
};
return (
<BtnOptionnalLinkWithTooltip
content={<FileDownIcon className="w-4 h-4 m-auto" />}
tooltipContent={tooltipContent}
type="button"
variant="outline"
size="icon"
disabled={disabled}
onClick={handleExport}
/>
);
}