First version of new converter

Author: JackTench

src/app/converter.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import { useState } from "react";
 
 import AppFileSelect from "@/components/libresplit/AppFileSelect";
 import init, { convert } from "@libresplit/libresplit-converter";
@@ -8,9 +8,8 @@ export function Converter() {
   const [selectedFile, setSelectedFile] = useState<File | null>(null);
   const [result, setResult] = useState<string | null>(null);
 
-  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const file = event.target.files?.[0] || null;
-    setSelectedFile(file);
+  const handleSelectChange = (files: File | File[] | null) => {
+    setSelectedFile(Array.isArray(files) ? (files[0] ?? null) : files);
   };
 
   const handleSubmit = async () => {
@@ -21,11 +20,8 @@ export function Converter() {
 
     try {
       const text = await selectedFile.text();
-
       await init(wasmUrl);
-
       const converted = convert(text);
-
       setResult(converted);
     } catch (error) {
       console.error("Error processing file: ", error);
@@ -37,21 +33,41 @@ export function Converter() {
     if (!result || !selectedFile) return;
 
     const fileName = selectedFile.name.replace(/\.[^/.]+$/, ".json");
-
     const blob = new Blob([result], { type: "application/json" });
     const url = URL.createObjectURL(blob);
 
     const link = document.createElement("a");
     link.href = url;
     link.download = fileName;
     link.click();
-
     URL.revokeObjectURL(url);
   };
 
   return (
-    <div>
-      <AppFileSelect />
+    <div className="space-y-4">
+      <AppFileSelect
+        label="Select LiveSplit file:"
+        value={selectedFile}
+        onChange={handleSelectChange}
+        multiple={false}
+        filters={[{ name: "LiveSplit (.lss)", extensions: ["lss", "xml"] }]}
+      />
+
+      <div className="flex gap-2">
+        <button
+          onClick={handleSubmit}
+          className="rounded bg-blue-600 px-4 py-2 text-white hover:bg-blue-700"
+        >
+          Convert
+        </button>
+        <button
+          onClick={handleDownload}
+          disabled={!result}
+          className="rounded bg-gray-200 px-4 py-2 text-black disabled:opacity-50"
+        >
+          Download Splits
+        </button>
+      </div>
     </div>
   );
 }