VirtWebRemote/remote_frontend/src/App.tsx

import {
  Tab,
  TabList,
  makeStyles,
  typographyStyles,
} from "@fluentui/react-components";
import { ServerApi } from "./api/ServerApi";
import { AuthRouteWidget } from "./routes/AuthRouteWidget";
import { AsyncWidget } from "./widgets/AsyncWidget";
import { MainMenu } from "./widgets/MainMenu";
import { SystemInfoWidget } from "./widgets/SystemInfoWidget";
import { VirtualMachinesWidget } from "./widgets/VirtualMachinesWidget";
import {
  DesktopFilled,
  DesktopRegular,
  Info12Filled,
  Info12Regular,
  InfoFilled,
  InfoRegular,
  bundleIcon,
} from "@fluentui/react-icons";
import React from "react";

const useStyles = makeStyles({
  title: typographyStyles.title2,
});

const InfoIcon = bundleIcon(InfoFilled, InfoRegular);

const DesktopIcon = bundleIcon(DesktopFilled, DesktopRegular);

export function App() {
  return (
    <AsyncWidget
      loadKey={1}
      errMsg="Failed to load server configuration!"
      load={ServerApi.LoadConfig}
      loadingMessage="Loading server configuration..."
      build={() => <AppInner />}
    />
  );
}

function AppInner(): React.ReactElement {
  const styles = useStyles();
  const [tab, setTab] = React.useState<"vm" | "info">("vm");

  if (!ServerApi.Config.authenticated && !ServerApi.Config.disable_auth)
    return <AuthRouteWidget />;

  return (
    <div
      style={{
        width: "95%",
        maxWidth: "1000px",
        margin: "50px auto",
      }}
    >
      <span className={styles.title}>VirtWebRemote</span>
      <div
        style={{
          display: "flex",
          justifyContent: "space-between",
          marginTop: "30px",
        }}
      >
        <TabList
          selectedValue={tab}
          onTabSelect={(_, d) => setTab(d.value as any)}
        >
          <Tab value="vm" icon={<DesktopIcon />}>
            Virtual machines
          </Tab>
          <Tab value="info" icon={<InfoIcon />}>
            System info
          </Tab>
        </TabList>
        <div>
          <MainMenu />
        </div>
      </div>
      {tab === "vm" && <VirtualMachinesWidget />}
      {tab === "info" && <SystemInfoWidget />}
    </div>
  );
}