diff --git a/ui/src/GettingStartedModal.tsx b/ui/src/GettingStartedModal.tsx
new file mode 100644
index 00000000..4886adee
--- /dev/null
+++ b/ui/src/GettingStartedModal.tsx
@@ -0,0 +1,21 @@
+import {modalStyle} from "./styling/theme.ts";
+import {Box, Grid2, Modal, Typography} from "@mui/material";
+
+interface GettingStartedModalProps {
+ close: () => void;
+ isOpen: boolean;
+}
+
+const GettingStartedModal = ({ close, isOpen }: GettingStartedModalProps) => {
+ return (
+
+
+
+ Getting Started with zrok
+
+
+
+ )
+}
+
+export default GettingStartedModal;
\ No newline at end of file
diff --git a/ui/src/NavBar.tsx b/ui/src/NavBar.tsx
index 97eeddf3..24098c85 100644
--- a/ui/src/NavBar.tsx
+++ b/ui/src/NavBar.tsx
@@ -3,10 +3,12 @@ import LogoutIcon from "@mui/icons-material/Logout";
import VisualizerIcon from "@mui/icons-material/Hub";
import TabularIcon from "@mui/icons-material/TableRows";
import LimitIcon from "@mui/icons-material/CrisisAlert";
+import HelpIcon from "@mui/icons-material/LiveHelp";
import zrokLogo from "./assets/zrok-1.0.0-rocket-green.svg";
import useApiConsoleStore from "./model/store.ts";
import BandwidthLimitedModal from "./BandwidthLimitedModal.tsx";
import {useEffect, useState} from "react";
+import GettingStartedModal from "./GettingStartedModal.tsx";
interface NavBarProps {
logout: () => void;
@@ -15,6 +17,7 @@ interface NavBarProps {
}
const NavBar = ({ logout, visualizer, toggleMode }: NavBarProps) => {
+ const nodes = useApiConsoleStore((state) => state.nodes);
const limited = useApiConsoleStore((state) => state.limited);
const [limitedModalOpen, setLimitedModalOpen] = useState(false);
const openLimitedModal = () => {
@@ -23,6 +26,13 @@ const NavBar = ({ logout, visualizer, toggleMode }: NavBarProps) => {
const closeLimitedModal = () => {
setLimitedModalOpen(false);
}
+ const [gettingStartedOpen, setGettingStartedOpen] = useState(false);
+ const openGettingStarted = () => {
+ setGettingStartedOpen(true);
+ }
+ const closeGettingStarted = () => {
+ setGettingStartedOpen(false);
+ }
useEffect(() => {
if(!limited) {
@@ -38,6 +48,22 @@ const NavBar = ({ logout, visualizer, toggleMode }: NavBarProps) => {
);
+ const gettingStartedButton = (
+
+
+
+
+
+ );
+
+ const helpButton = (
+
+
+
+
+
+ );
+
const handleClick = () => {
toggleMode(!visualizer);
}
@@ -59,14 +85,12 @@ const NavBar = ({ logout, visualizer, toggleMode }: NavBarProps) => {
-
-
- { limited ? limitedIndicator : null }
-
+ { !nodes || nodes.length > 1 ? helpButton : gettingStartedButton }
+ { limited ? limitedIndicator : null }
@@ -77,6 +101,7 @@ const NavBar = ({ logout, visualizer, toggleMode }: NavBarProps) => {
+
>
);
}