diff options
| author | xXJSONDeruloXx <danielhimebauch@gmail.com> | 2025-07-14 22:50:42 -0400 |
|---|---|---|
| committer | xXJSONDeruloXx <danielhimebauch@gmail.com> | 2025-07-14 22:50:42 -0400 |
| commit | 885b9a938f9c5193ab0259502d4f63e981fc4a26 (patch) | |
| tree | 5eb638bcbc6e72e27847369c26b8c24df3faafe8 /src | |
| parent | e961c485167802c32a69482a262349dead4d4f2e (diff) | |
| download | decky-lsfg-vk-885b9a938f9c5193ab0259502d4f63e981fc4a26.tar.gz decky-lsfg-vk-885b9a938f9c5193ab0259502d4f63e981fc4a26.zip | |
launch wiki in steam browser button
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/UsageInstructions.tsx | 100 |
1 files changed, 60 insertions, 40 deletions
diff --git a/src/components/UsageInstructions.tsx b/src/components/UsageInstructions.tsx index 3df3d78..277f685 100644 --- a/src/components/UsageInstructions.tsx +++ b/src/components/UsageInstructions.tsx @@ -1,4 +1,5 @@ -import { PanelSectionRow } from "@decky/ui"; +import { PanelSectionRow, ButtonItem } from "@decky/ui"; +import { FaExternalLinkAlt } from "react-icons/fa"; interface ConfigType { enableLsfg: boolean; @@ -42,51 +43,70 @@ 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> - <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> + <> + <PanelSectionRow> <div style={{ - fontFamily: "monospace", - backgroundColor: "rgba(0, 0, 0, 0.3)", - padding: "4px", - borderRadius: "2px", - fontSize: "12px", - marginBottom: "6px" + fontSize: "13px", + marginTop: "12px", + padding: "8px", + backgroundColor: "rgba(255, 255, 255, 0.05)", + borderRadius: "4px" }} > - ~/lsfg %command% - </div> - <div style={{ marginBottom: "4px" }}> - Option 2: Manual environment variables: + <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" + }} + > + {buildManualEnvVars()} + </div> </div> - <div - style={{ - fontFamily: "monospace", - backgroundColor: "rgba(0, 0, 0, 0.3)", - padding: "4px", - borderRadius: "2px", - fontSize: "12px", - marginBottom: "6px" - }} + </PanelSectionRow> + + <PanelSectionRow> + <ButtonItem + layout="below" + onClick={handleWikiClick} > - {buildManualEnvVars()} - </div> - </div> - </PanelSectionRow> + <div style={{ display: "flex", alignItems: "center", gap: "8px" }}> + <FaExternalLinkAlt /> + <div>LSFG-VK Wiki</div> + </div> + </ButtonItem> + </PanelSectionRow> + </> ); } |