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) => { + ); }