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