Annotate Workspace Layout

Credit to "https://github.com/UniversalDataTool/react-material-workspace-layout.git"

Installation and Usage

npm i annotate-workspace-layout

import Workspace from "react-material-workspace-layout/Workspace"
import SidebarBox from "react-material-workspace-layout/SidebarBox"
;<Workspace
  allowFullscreen
  headerItems={[{ name: "Prev" }, { name: "Next" }, { name: "Save" }]}
  onClickHeaderItem={console.log}
  onClickIconSidebarItem={console.log}
  iconSidebarItems={[
    {
      name: "Play",
    },
    {
      name: "Pause",
    },
  ]}
  rightSidebarItems={[
    <SidebarBox icon={<FeaturedVideoIcon />} title="Region Selector">
      Hello world!
    </SidebarBox>,
  ]}
>
  Hello World, this is the main content where an image or something might go!
</Workspace>

Props

| Prop | Description | Example | Default | | ------------------------ | ---------------------------- | ------- | ------- | | allowFullscreen | Enables a full screen button | | false | | headerItems | | | | | onClickHeaderItem | | | | onClickIconSidebarItem | | | | iconSidebarItems | | | | rightSidebarItems | | |