separate wiki button into component

3 files changed, 26 insertions, 17 deletions

diff --git a/src/components/UsageInstructions.tsx b/src/components/UsageInstructions.tsx
index 277f685..a826d3d 100644
--- a/src/components/UsageInstructions.tsx
+++ b/src/components/UsageInstructions.tsx
@@ -1,5 +1,5 @@
-import { PanelSectionRow, ButtonItem } from "@decky/ui";
-import { FaExternalLinkAlt } from "react-icons/fa";
+import { PanelSectionRow } from "@decky/ui";
+import { WikiButton } from "./WikiButton";
 
 interface ConfigType {
   enableLsfg: boolean;
@@ -44,10 +44,6 @@ export function UsageInstructions({ config }: UsageInstructionsProps) {
     return envVars.length > 0 ? `${envVars.join(" ")} %command%` : "%command%";
   };
 
-  const handleWikiClick = () => {
-    window.open("https://github.com/PancakeTAS/lsfg-vk/wiki", "_blank");
-  };
-
   return (
     <>
       <PanelSectionRow>
@@ -96,17 +92,7 @@ export function UsageInstructions({ config }: UsageInstructionsProps) {
         </div>
       </PanelSectionRow>
 
-      <PanelSectionRow>
-        <ButtonItem
-          layout="below"
-          onClick={handleWikiClick}
-        >
-          <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
-            <FaExternalLinkAlt />
-            <div>LSFG-VK Wiki</div>
-          </div>
-        </ButtonItem>
-      </PanelSectionRow>
+      <WikiButton />
     </>
   );
 }
diff --git a/src/components/WikiButton.tsx b/src/components/WikiButton.tsx
new file mode 100644
index 0000000..80ff1d9
--- /dev/null
+++ b/src/components/WikiButton.tsx
@@ -0,0 +1,22 @@
+import { PanelSectionRow, ButtonItem } from "@decky/ui";
+import { FaExternalLinkAlt } from "react-icons/fa";
+
+export function WikiButton() {
+  const handleWikiClick = () => {
+    window.open("https://github.com/PancakeTAS/lsfg-vk/wiki", "_blank");
+  };
+
+  return (
+    <PanelSectionRow>
+      <ButtonItem
+        layout="below"
+        onClick={handleWikiClick}
+      >
+        <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
+          <FaExternalLinkAlt />
+          <div>LSFG-VK Wiki</div>
+        </div>
+      </ButtonItem>
+    </PanelSectionRow>
+  );
+}
diff --git a/src/components/index.ts b/src/components/index.ts
index 77f11d4..26eb2fb 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -3,3 +3,4 @@ export { StatusDisplay } from "./StatusDisplay";
 export { InstallationButton } from "./InstallationButton";
 export { ConfigurationSection } from "./ConfigurationSection";
 export { UsageInstructions } from "./UsageInstructions";
+export { WikiButton } from "./WikiButton";