waveterm/frontend/app/element/quicktips.tsx
2024-10-24 23:16:44 -07:00

194 lines
6.7 KiB
TypeScript

// Copyright 2024, Command Line Inc.
// SPDX-License-Identifier: Apache-2.0
import { MagnifyIcon } from "@/app/element/magnify";
import { PLATFORM } from "@/app/store/global";
import "./quicktips.less";
const KeyBinding = ({ keyDecl }: { keyDecl: string }) => {
const parts = keyDecl.split(":");
const elems: React.ReactNode[] = [];
for (let part of parts) {
if (part === "Cmd") {
if (PLATFORM === "darwin") {
elems.push(
<div key="cmd" className="keybinding">
Cmd
</div>
);
} else {
elems.push(
<div key="alt" className="keybinding">
Alt
</div>
);
}
continue;
}
if (part == "Ctrl") {
elems.push(
<div key="ctrl" className="keybinding">
^ Ctrl
</div>
);
continue;
}
if (part == "Shift") {
elems.push(
<div key="shift" className="keybinding">
Shift
</div>
);
continue;
}
if (part == "Arrows") {
elems.push(
<div key="arrows1" className="keybinding">
</div>
);
elems.push(
<div key="arrows2" className="keybinding">
</div>
);
elems.push(
<div key="arrows3" className="keybinding">
</div>
);
elems.push(
<div key="arrows4" className="keybinding">
</div>
);
continue;
}
if (part == "Digit") {
elems.push(
<div key="digit" className="keybinding">
Number (1-9)
</div>
);
continue;
}
elems.push(
<div key={part} className="keybinding">
{part.toUpperCase()}
</div>
);
}
return <div className="keybinding-group">{elems}</div>;
};
const QuickTips = () => {
return (
<div className="tips-wrapper">
<div className="tips-section">
<div className="tip-section-header">Header Icons</div>
<div className="tip">
<div className="icon-wrap">
<i className="fa-solid fa-sharp fa-laptop fa-fw" />
</div>
Connect to a remote server
<KeyBinding keyDecl="Cmd:g" />
</div>
<div className="tip">
<div className="icon-wrap">
<MagnifyIcon enabled={false} />
</div>
Magnify a Block <KeyBinding keyDecl="Cmd:m" />
</div>
<div className="tip">
<div className="icon-wrap">
<i className="fa-solid fa-sharp fa-cog fa-fw" />
</div>
Block Settings
</div>
<div className="tip">
<div className="icon-wrap">
<i className="fa-solid fa-sharp fa-xmark-large fa-fw" />
</div>
Close Block <KeyBinding keyDecl="Cmd:w" />
</div>
<div className="tip-section-header">Important Keybindings</div>
<div className="tip">
<KeyBinding keyDecl="Cmd:t" />
New Tab
</div>
<div className="tip">
<KeyBinding keyDecl="Cmd:n" />
New Terminal Block
</div>
<div className="tip">
<KeyBinding keyDecl="Ctrl:Shift:Arrows" />
Navigate Between Blocks
</div>
<div className="tip">
<KeyBinding keyDecl="Ctrl:Shift:Digit" />
Focus Nth Block
</div>
<div className="tip">
<KeyBinding keyDecl="Cmd:Digit" />
Switch To Nth Tab
</div>
<div className="tip-section-header">wsh commands</div>
<div className="tip">
<div>
<code>wsh view [filename|url]</code>
<div style={{ marginTop: 5 }}>
Run this command in the terminal to preview a file, directory, or web URL.
</div>
</div>
</div>
<div className="tip-section-header">More Tips</div>
<div className="tip">
<div className="icon-wrap">
<i className="fa-solid fa-sharp fa-computer-mouse fa-fw" />
</div>
Right click the tabs to change backgrounds or rename.
</div>
<div className="tip">
<div className="icon-wrap">
<i className="fa-solid fa-sharp fa-cog fa-fw" />
</div>
Click the gear in the web view to set your homepage
</div>
<div className="tip">
<div className="icon-wrap">
<i className="fa-solid fa-sharp fa-cog fa-fw" />
</div>
Click the gear in the terminal to set your terminal theme and font size
</div>
<div className="tip-section-header">Need More Help?</div>
<div className="tip">
<div className="icon-wrap">
<i className="fa-brands fa-discord fa-fw" />
</div>
<div>
<a target="_blank" href="https://discord.gg/XfvZ334gwU" rel="noopener">
Join Our Discord
</a>
</div>
</div>
<div className="tip">
<div className="icon-wrap">
<i className="fa-solid fa-sharp fa-sliders fa-fw" />
</div>
<div>
<a target="_blank" href="https://docs.waveterm.dev/config" rel="noopener">
Configuration Options
</a>
</div>
</div>
</div>
</div>
);
};
export { KeyBinding, QuickTips };