From 77494457e2a4f5c80c3a2f7acb054b12d918d8ad Mon Sep 17 00:00:00 2001
From: xXJSONDeruloXx <danielhimebauch@gmail.com>
Date: Sun, 13 Jul 2025 00:04:54 -0400
Subject: restructure for maintainability

---
 src/components/UsageInstructions.tsx | 68 ++++++++++++++++++++++++++++++++++++
 1 file changed, 68 insertions(+)
 create mode 100644 src/components/UsageInstructions.tsx

(limited to 'src/components/UsageInstructions.tsx')

diff --git a/src/components/UsageInstructions.tsx b/src/components/UsageInstructions.tsx
new file mode 100644
index 0000000..712d4c1
--- /dev/null
+++ b/src/components/UsageInstructions.tsx
@@ -0,0 +1,68 @@
+import { PanelSectionRow } from "@decky/ui";
+
+interface UsageInstructionsProps {
+  multiplier: number;
+}
+
+export function UsageInstructions({ multiplier }: UsageInstructionsProps) {
+  return (
+    <PanelSectionRow>
+      <div
+        style={{
+          fontSize: "13px",
+          marginTop: "12px",
+          padding: "8px",
+          backgroundColor: "rgba(255, 255, 255, 0.05)",
+          borderRadius: "4px"
+        }}
+      >
+        <div style={{ fontWeight: "bold", marginBottom: "6px" }}>
+          Usage Instructions:
+        </div>
+        <div style={{ marginBottom: "4px" }}>
+          Option 1: Use the lsfg script (recommended):
+        </div>
+        <div
+          style={{
+            fontFamily: "monospace",
+            backgroundColor: "rgba(0, 0, 0, 0.3)",
+            padding: "4px",
+            borderRadius: "2px",
+            fontSize: "12px",
+            marginBottom: "6px"
+          }}
+        >
+          ~/lsfg %COMMAND%
+        </div>
+        <div style={{ marginBottom: "4px" }}>
+          Option 2: Manual environment variables:
+        </div>
+        <div
+          style={{
+            fontFamily: "monospace",
+            backgroundColor: "rgba(0, 0, 0, 0.3)",
+            padding: "4px",
+            borderRadius: "2px",
+            fontSize: "12px",
+            marginBottom: "6px"
+          }}
+        >
+          ENABLE_LSFG=1 LSFG_MULTIPLIER={multiplier} %COMMAND%
+        </div>
+        <div style={{ fontSize: "11px", opacity: 0.8 }}>
+          The lsfg script uses your current configuration settings.
+          <br />
+          • ENABLE_LSFG=1 - Enables frame generation
+          <br />
+          • LSFG_MULTIPLIER=2-4 - FPS multiplier (start with 2)
+          <br />
+          • LSFG_FLOW_SCALE=0.25-1.0 - Flow scale (for performance)
+          <br />
+          • LSFG_HDR=1 - HDR mode (only if using HDR)
+          <br />
+          • MESA_VK_WSI_PRESENT_MODE=immediate - Disable vsync
+        </div>
+      </div>
+    </PanelSectionRow>
+  );
+}
-- 
cgit v1.2.3