2023-06-13 00:13:24 +00:00
|
|
|
import styles from "./App.module.scss";
|
|
|
|
import {
|
|
|
|
Button,
|
|
|
|
ChakraProvider,
|
|
|
|
Input,
|
|
|
|
InputGroup,
|
|
|
|
InputRightElement,
|
|
|
|
Menu,
|
|
|
|
MenuButton,
|
|
|
|
MenuItem,
|
|
|
|
Image,
|
|
|
|
MenuList,
|
|
|
|
CloseButton,
|
2023-06-13 04:07:03 +00:00
|
|
|
useColorMode,
|
2023-06-13 00:13:24 +00:00
|
|
|
} from "@chakra-ui/react";
|
|
|
|
import { AddIcon, ChevronDownIcon, SearchIcon } from "@chakra-ui/icons";
|
2023-06-13 04:07:03 +00:00
|
|
|
import { Mosaic, MosaicWindow } from "react-mosaic-component";
|
2023-06-13 00:13:24 +00:00
|
|
|
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>,
|
|
|
|
};
|
|
|
|
|
2023-06-13 04:07:03 +00:00
|
|
|
const { colorMode, toggleColorMode } = useColorMode();
|
|
|
|
|
2023-06-13 00:13:24 +00:00
|
|
|
return (
|
2023-06-13 04:07:03 +00:00
|
|
|
<main className={styles.main}>
|
|
|
|
<nav className={styles.nav}>
|
|
|
|
<h1 className={styles.title}>panorama</h1>
|
|
|
|
|
|
|
|
{colorMode}
|
2023-06-13 00:13:24 +00:00
|
|
|
|
2023-06-13 04:07:03 +00:00
|
|
|
<Menu>
|
|
|
|
<MenuButton as={Button} rightIcon={<ChevronDownIcon />}>
|
|
|
|
<AddIcon />
|
|
|
|
</MenuButton>
|
2023-06-13 00:13:24 +00:00
|
|
|
|
2023-06-13 04:07:03 +00:00
|
|
|
<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>
|
2023-06-13 00:13:24 +00:00
|
|
|
|
2023-06-13 04:07:03 +00:00
|
|
|
<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>
|
2023-06-13 00:13:24 +00:00
|
|
|
|
2023-06-13 04:07:03 +00:00
|
|
|
<div className={styles.spacer} />
|
2023-06-13 00:13:24 +00:00
|
|
|
|
2023-06-13 04:07:03 +00:00
|
|
|
<InputGroup className={styles.searchContainer}>
|
|
|
|
<Input placeholder="Search..." />
|
|
|
|
<InputRightElement>
|
|
|
|
<SearchIcon />
|
|
|
|
</InputRightElement>
|
|
|
|
</InputGroup>
|
|
|
|
</nav>
|
2023-06-13 00:13:24 +00:00
|
|
|
|
2023-06-13 04:07:03 +00:00
|
|
|
<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: {
|
2023-06-13 00:13:24 +00:00
|
|
|
direction: "row",
|
2023-06-13 04:07:03 +00:00
|
|
|
first: {
|
|
|
|
direction: "column",
|
|
|
|
first: "Calendar",
|
|
|
|
second: "Email",
|
2023-06-13 00:13:24 +00:00
|
|
|
},
|
2023-06-13 04:07:03 +00:00
|
|
|
second: "Chat",
|
|
|
|
splitPercentage: 66.66,
|
|
|
|
},
|
|
|
|
splitPercentage: 25,
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
</main>
|
2023-06-13 00:13:24 +00:00
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
export default App;
|