restructure for maintainability

1 files changed, 64 insertions, 0 deletions

diff --git a/src/components/InstallationButton.tsx b/src/components/InstallationButton.tsx
new file mode 100644
index 0000000..7892678
--- /dev/null
+++ b/src/components/InstallationButton.tsx
@@ -0,0 +1,64 @@
+import { ButtonItem, PanelSectionRow } from "@decky/ui";
+import { FaDownload, FaTrash } from "react-icons/fa";
+
+interface InstallationButtonProps {
+  isInstalled: boolean;
+  isInstalling: boolean;
+  isUninstalling: boolean;
+  onInstall: () => void;
+  onUninstall: () => void;
+}
+
+export function InstallationButton({
+  isInstalled,
+  isInstalling,
+  isUninstalling,
+  onInstall,
+  onUninstall
+}: InstallationButtonProps) {
+  const renderButtonContent = () => {
+    if (isInstalling) {
+      return (
+        <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
+          <div>Installing...</div>
+        </div>
+      );
+    }
+
+    if (isUninstalling) {
+      return (
+        <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
+          <div>Uninstalling...</div>
+        </div>
+      );
+    }
+
+    if (isInstalled) {
+      return (
+        <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
+          <FaTrash />
+          <div>Uninstall lsfg-vk</div>
+        </div>
+      );
+    }
+
+    return (
+      <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
+        <FaDownload />
+        <div>Install lsfg-vk</div>
+      </div>
+    );
+  };
+
+  return (
+    <PanelSectionRow>
+      <ButtonItem
+        layout="below"
+        onClick={isInstalled ? onUninstall : onInstall}
+        disabled={isInstalling || isUninstalling}
+      >
+        {renderButtonContent()}
+      </ButtonItem>
+    </PanelSectionRow>
+  );
+}