feat: download output as json button

Author: brettkolodny

src/Preview.tsx

@@ -18,14 +18,22 @@ import { cn } from "@/utils/cn";
 import {
 	ActivityIcon,
 	BugIcon,
+	DownloadIcon,
 	ExternalLinkIcon,
 	LoaderIcon,
 	PlayIcon,
 	ScrollTextIcon,
 	XIcon,
 } from "lucide-react";
 import { AnimatePresence, motion } from "motion/react";
-import { type FC, useEffect, useMemo, useState } from "react";
+import {
+	type FC,
+	useCallback,
+	useEffect,
+	useMemo,
+	useRef,
+	useState,
+} from "react";
 import { useSearchParams } from "react-router";
 
 export const Preview: FC = () => {
@@ -40,6 +48,20 @@ export const Preview: FC = () => {
 	const [params] = useSearchParams();
 	const isDebug = useMemo(() => params.has("debug"), [params]);
 
+
+	const onDownloadOutput = useCallback(() => {
+		const blob = new Blob([JSON.stringify(output, null, 2)], {
+			type: "application/json",
+		});
+
+		const url = URL.createObjectURL(blob);
+
+		const link = document.createElement("a");
+		link.href = url;
+		link.download = "output.json";
+		link.click();
+	}, [output]);
+
 	useEffect(() => {
 		if (!window.go_preview) {
 			return;
@@ -93,9 +115,20 @@ export const Preview: FC = () => {
 					</div>
 				) : null}
 
-				<Tabs.List className={!isDebug ? "hidden" : undefined}>
-					<Tabs.Trigger value="preview" icon={PlayIcon} label="Preview" />
-					<Tabs.Trigger value="debug" icon={BugIcon} label="Debugger" />
+				<Tabs.List
+					className={cn(
+						"justify-between pr-3",
+						!isDebug ? "hidden" : undefined,
+					)}
+				>
+					<div className="flex">
+						<Tabs.Trigger value="preview" icon={PlayIcon} label="Preview" />
+						<Tabs.Trigger value="debug" icon={BugIcon} label="Debugger" />
+					</div>
+					<Button size="sm" variant="outline" className="self-center" onClick={onDownloadOutput}>
+						<DownloadIcon />
+						Download output
+					</Button>
 				</Tabs.List>
 
 				<Tabs.Content value="preview" asChild={true}>