fix #25: save the output as a file

Author: ashphy

package-lock.json

@@ -13,6 +13,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@formkit/tempo": "^0.1.2",
     "@icons-pack/react-simple-icons": "^10.2.0",
     "@monaco-editor/react": "^4.6.0",
     "@radix-ui/react-alert-dialog": "^1.1.6",
@@ -23,6 +24,7 @@
     "@radix-ui/react-select": "^2.1.4",
     "@radix-ui/react-slot": "^1.1.2",
     "@radix-ui/react-switch": "^1.1.3",
+    "@radix-ui/react-tooltip": "^1.1.8",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.0.0",
@@ -41,6 +43,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.17.0",
+    "@types/file-saver": "^2.0.7",
     "@types/node": "^22.13.14",
     "@types/react": "^18.3.18",
     "@types/react-dom": "^18.3.5",
@@ -49,6 +52,7 @@
     "eslint": "^9.23.0",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.19",
+    "file-saver": "^2.0.5",
     "globals": "^15.14.0",
     "peggy": "^4.2.0",
     "postcss": "^8.4.49",
@@ -58,4 +62,4 @@
     "vite": "^6.2.5",
     "vitest": "^3.0.9"
   }
-}
+}

package.json

@@ -0,0 +1,47 @@
+import { Button, ButtonProps } from "@/components/ui/button";
+import { saveAs } from "file-saver";
+import { Download } from "lucide-react";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
+import { useJSONPath } from "@/hooks/use-jsonpath";
+import { format } from "@formkit/tempo";
+
+export const DownloadButton = ({ className }: ButtonProps) => {
+  const { result } = useJSONPath();
+
+  const handleDownload = () => {
+    const text = result.isValid ? JSON.stringify(result.values, null, 2) : "[]";
+    const blob = new Blob([text], {
+      type: "application/json",
+    });
+    saveAs(
+      blob,
+      `evaluation_results_${format(new Date(), "YYYYMMDD_HHmmss")}.json`
+    );
+  };
+
+  return (
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button
+            variant="outline"
+            size="icon"
+            className={cn("rounded-full", className)}
+            onClick={handleDownload}
+          >
+            <Download />
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent>
+          <p>Download file</p>
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+};

src/components/download-button.tsx

@@ -3,6 +3,7 @@ import { JSONEditor } from "./editor/json-editor";
 import { Result } from "./editor/result";
 import { OutputPathSwitch } from "./output-path-switch";
 import { useJSONPath } from "@/hooks/use-jsonpath";
+import { DownloadButton } from "./download-button";
 
 export const JSONPathOnlineEvaluator = () => {
   const { outputPaths, setOutputPaths } = useJSONPath();
@@ -13,17 +14,27 @@ export const JSONPathOnlineEvaluator = () => {
 
       <div className="grid grid-cols-2 gap-4">
         <div>
-          <h2 className="py-1 text-xl text-joe-green-950">Document</h2>
+          <div className="flex justify-between items-center mb-1">
+            <h2 className="py-1 text-xl text-joe-green-950">Document</h2>
+          </div>
           <JSONEditor />
         </div>
         <div>
-          <div className="flex justify-between">
+          <div className="flex justify-between items-center mb-1">
             <h2 className="py-1 text-xl text-joe-green-950">
               Evaluation Results
             </h2>
-            <OutputPathSwitch checked={outputPaths} onChange={setOutputPaths} />
+            <div className="flex items-center gap-2">
+              <OutputPathSwitch
+                checked={outputPaths}
+                onChange={setOutputPaths}
+              />
+            </div>
+          </div>
+          <div className="relative">
+            <Result outputPathMode={outputPaths} />
+            <DownloadButton className="absolute bottom-2 right-6" />
           </div>
-          <Result outputPathMode={outputPaths} />
         </div>
       </div>
     </div>

src/components/online-evaluator.tsx

@@ -0,0 +1,30 @@
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "@/lib/utils"
+
+const TooltipProvider = TooltipPrimitive.Provider
+
+const Tooltip = TooltipPrimitive.Root
+
+const TooltipTrigger = TooltipPrimitive.Trigger
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Portal>
+    <TooltipPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-tooltip-content-transform-origin]",
+        className
+      )}
+      {...props}
+    />
+  </TooltipPrimitive.Portal>
+))
+TooltipContent.displayName = TooltipPrimitive.Content.displayName
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

src/components/ui/tooltip.tsx

@@ -34,7 +34,7 @@ h3 {
     --card-foreground: 240 10% 3.9%;
     --popover: 0 0% 100%;
     --popover-foreground: 240 10% 3.9%;
-    --primary: 142.1 76.2% 36.3%;
+    --primary: 175, 100%, 33%;
     --primary-foreground: 355.7 100% 97.3%;
     --secondary: 240 4.8% 95.9%;
     --secondary-foreground: 240 5.9% 10%;
@@ -46,7 +46,7 @@ h3 {
     --destructive-foreground: 0 0% 98%;
     --border: 240 5.9% 90%;
     --input: 240 5.9% 90%;
-    --ring: 142.1 76.2% 36.3%;
+    --ring: 175, 100%, 33%;
     --radius: 0.3rem;
     --chart-1: 12 76% 61%;
     --chart-2: 173 58% 39%;