feat: menu

src/parts/converter/converter.tsx

@@ -0,0 +1,80 @@
+import { useState } from "react";
+import { open, save } from "@tauri-apps/plugin-dialog";
+import { invoke } from "@tauri-apps/api/core";
+import SeparatorChooser from "./separatorChooser.tsx";
+import PathsChooser from "./pathsChooser.tsx";
+
+function Converter() {
+  const [sourceFileName, setSourceFileName] = useState("");
+  const [sourcePath, setSourcePath] = useState("");
+  const [targetPath, setTargetPath] = useState("");
+  const [separator, setSeparator] = useState(";");
+  const [res, setRes] = useState("");
+
+  async function convert() {
+    await invoke("convert", {
+      source: sourcePath,
+      target: targetPath,
+      sep: separator,
+    }).then((message) => setRes((message as string) ?? ""));
+  }
+
+  async function openDialog(): Promise<void> {
+    const file = await open({
+      multiple: false,
+      directory: false,
+      filters: [
+        {
+          name: "Excel files",
+          extensions: ["xls", "xlsx"],
+        },
+      ],
+    });
+    if (file) {
+      setSourcePath(file.path);
+      setSourceFileName(file.name ?? "no name");
+    }
+  }
+
+  async function saveDialog(): Promise<void> {
+    const path = await save({
+      filters: [
+        {
+          name: "csv files",
+          extensions: ["csv"],
+        },
+      ],
+    });
+    if (path) {
+      setTargetPath(path);
+    }
+    console.log(path);
+  }
+
+  return (
+    <div className="w-max mt-2">
+      <ul className="menu bg-base-200 w-56 rounded-box">
+        <details>
+          <summary className="text-lg cursor-pointer">Separator</summary>
+          <li>{SeparatorChooser(setSeparator)}</li>
+        </details>
+
+        <details>
+          <summary className="text-lg cursor-pointer">Paths</summary>
+          <li>{PathsChooser(openDialog, saveDialog)}</li>
+        </details>
+      </ul>
+
+      <div className="p-1 mt-8">
+        <p className="p-tc pb-1">Source: {sourceFileName}</p>
+        <p className="p-tc pb-1">Target: {targetPath}</p>
+        <p className="p-tc pb-1">Result: {res}</p>
+        <button className="btn btn-accent pb-1" onClick={convert}>
+          Convert
+        </button>
+      </div>
+    </div>
+  );
+}
+
+export default Converter;

src/parts/converter/pathsChooser.tsx

@@ -0,0 +1,15 @@
+export default function PathsChooser(
+  openDialog: () => Promise<void>,
+  saveDialog: () => Promise<void>,
+) {
+  return (
+    <>
+      <button className="btn btn-primary  pb-2" onClick={openDialog}>
+        Choose source path
+      </button>
+      <button className="btn btn-primary pb-2" onClick={saveDialog}>
+        Choose target path
+      </button>
+    </>
+  );
+}

src/parts/converter/separatorChooser.tsx

@@ -0,0 +1,50 @@
+export default function SeparatorChooser(
+  setSeparator: (value: ((prevState: string) => string) | string) => void,
+) {
+  return (
+    <div className="p-1 mr-8">
+      <div className="form-control">
+        <label className="label cursor-pointer">
+          <span className="label-text mr-1">Semicolon</span>
+          <input
+            type="radio"
+            name="radio-1"
+            className="radio checked:bg-red-500"
+            defaultChecked
+            onClick={() => {
+              setSeparator(";");
+            }}
+          ></input>
+        </label>
+      </div>
+
+      <div className="form-control">
+        <label className="label cursor-pointer">
+          <span className="label-text mr-1">Comma</span>
+          <input
+            type="radio"
+            name="radio-1"
+            className="radio checked:bg-blue-500"
+            onClick={() => {
+              setSeparator(",");
+            }}
+          ></input>
+        </label>
+      </div>
+
+      <div className="form-control">
+        <label className="label cursor-pointer">
+          <span className="label-text">Colon</span>
+          <input
+            type="radio"
+            name="radio-1"
+            className="radio checked:bg-green-500"
+            onClick={() => {
+              setSeparator(":");
+            }}
+          ></input>
+        </label>
+      </div>
+    </div>
+  );
+}

src/root/constants.tsx

@@ -1,4 +1,4 @@
-import Converter from "../parts/converter.tsx";
+import Converter from "../parts/converter/converter.tsx";
 import Settings from "../parts/settings.tsx";
 
 import { ReactElement } from "react";