Adding export to ags file button

ags-validator-app/app/globals.css

@@ -11,6 +11,7 @@
     --popover: #ffffff; /* White */
     --popover-foreground: #302003; /* Darker text color */
     --primary: #376409; /* Dark green */
+    --primary-hover: #4b7813;
     --primary-foreground: #ffffff; /* White */
     --secondary: #b08a57; /* Light brown */
     --secondary-foreground: #302003; /* Darker text color */
@@ -36,6 +37,7 @@
     --popover: #302003; /* Dark brown */
     --popover-foreground: #f5f3e7; /* Lighter text color for dark mode */
     --primary: #85a86f; /* Slightly lighter primary color for dark mode */
+    --primary-hover: #688a4d;
     --primary-foreground: #302003; /* Dark brown */
     --secondary: #5a7a37; /* Slightly lighter secondary color for dark mode */
     --secondary-foreground: #f5f3e7; /* Lighter text color for dark mode */

ags-validator-app/components/ui/button.tsx

@@ -9,7 +9,7 @@ const buttonVariants = cva(
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        default: "bg-primary text-primary-foreground hover:bg-[var(--primary-hover)]",
         destructive:
           "bg-destructive text-destructive-foreground hover:bg-destructive/90",
         outline:
@@ -33,6 +33,7 @@ const buttonVariants = cva(
   }
 );
 
+
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof buttonVariants> {

ags-validator-app/components/validator/TextArea/CodeMirrorTextArea.tsx

@@ -81,7 +81,7 @@ const CodeMirrorTextArea: React.FC<CodeMirrorTextAreaProps> = ({
       }),
     [errorLines, hoverLineNumber]
   );
-
+  // console.log(agsData)
   return (
     <div className="h-full w-full flex flex-col overflow-auto">
       <CodeMirror

ags-validator-app/components/validator/validator.tsx

@@ -5,6 +5,7 @@ import ErrorMessages from "./ErrorMessages";
 import React, { useEffect, useState } from "react";
 import TextArea from "./TextArea";
 import AGSUpload from "./AGSUpload";
+import { Button } from "@/components/ui/button"
 import { Card, CardContent } from "@/components/ui/card";
 import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
 import { Label } from "../ui/label";
@@ -34,6 +35,18 @@ export default function Validator() {
     }
   }, [parsedAgs, selectedGroup, setSelectedGroup]);
 
+
+  // Function to handle exporting the agsData as a .ags file
+  const handleExport = () => {
+    if (!agsData) return;
+
+    const blob = new Blob([agsData], { type: "text/plain;charset=utf-8" });
+    const link = document.createElement("a");
+    link.href = URL.createObjectURL(blob);
+    link.download = "exported.ags"; // Filename for the download
+    link.click();
+  };
+
   return (
     <div className="flex justify-center w-full">
       <div className="flex flex-col p-4 max-w-500 w-full">
@@ -60,6 +73,8 @@ export default function Validator() {
                       </TabsTrigger>
                     </TabsList>
                   </div>
+                  <Button variant={"default"}  disabled={agsData === ""} onClick={handleExport}>Export</Button>
+
                   {tabsViewValue === "tables" && parsedAgs !== undefined && (
                     <SelectTable
                       parsedAgs={parsedAgs}