panorama/src-ts/App.tsx

import styles from "./App.module.scss";
import {
  Button,
  ChakraProvider,
  Input,
  InputGroup,
  InputRightElement,
  Menu,
  MenuButton,
  MenuItem,
  Image,
  MenuList,
  CloseButton,
  useColorMode,
} from "@chakra-ui/react";
import { AddIcon, ChevronDownIcon, SearchIcon } from "@chakra-ui/icons";
import { Mosaic, MosaicWindow } from "react-mosaic-component";
import classNames from "classnames";

import "react-mosaic-component/react-mosaic-component.css";
import "@blueprintjs/core/lib/css/blueprint.css";
import "@blueprintjs/icons/lib/css/blueprint-icons.css";

function App() {
  const ELEMENT_MAP: { [viewId: string]: JSX.Element } = {
    a: <div>Left Window</div>,
    b: <div>Top Right Window</div>,
    c: <div>Bottom Right Window</div>,
  };

  const { colorMode, toggleColorMode } = useColorMode();

  return (
    <main className={styles.main}>
      <nav className={styles.nav}>
        <h1 className={styles.title}>panorama</h1>

        {colorMode}

        <Menu>
          <MenuButton as={Button} rightIcon={<ChevronDownIcon />}>
            <AddIcon />
          </MenuButton>

          <MenuList zIndex={500}>
            <MenuItem minH="48px" onClick={toggleColorMode}>
              <Image
                boxSize="2rem"
                borderRadius="full"
                src="https://placekitten.com/100/100"
                alt="Fluffybuns the destroyer"
                mr="12px"
              />
              <span>Fluffybuns the Destroyer</span>
            </MenuItem>

            <MenuItem minH="40px">
              <Image
                boxSize="2rem"
                borderRadius="full"
                src="https://placekitten.com/120/120"
                alt="Simon the pensive"
                mr="12px"
              />
              <span>Simon the pensive</span>
            </MenuItem>
          </MenuList>
        </Menu>

        <div className={styles.spacer} />

        <InputGroup className={styles.searchContainer}>
          <Input placeholder="Search..." />
          <InputRightElement>
            <SearchIcon />
          </InputRightElement>
        </InputGroup>
      </nav>

      <Mosaic<string>
        className={classNames(styles.container, "mosaic-blueprint-theme")}
        renderTile={(id, path) => (
          <MosaicWindow title={id} path={path}></MosaicWindow>
        )}
        blueprintNamespace="bp3"
        initialValue={{
          direction: "row",
          first: "Journal",
          second: {
            direction: "row",
            first: {
              direction: "column",
              first: "Calendar",
              second: "Email",
            },
            second: "Chat",
            splitPercentage: 66.66,
          },
          splitPercentage: 25,
        }}
      />
    </main>
  );
}

export default App;