feat: Viewport component and API definition

platform/ui/src/components/Viewport/Viewport.jsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { ViewportActionBar, Notification, Button } from '@ohif/ui';
+
+const Viewport = ({
+  viewportIndex,
+  onSeriesChange,
+  studyData,
+  isTracked,
+  studyDate,
+  modality,
+  currentSeries,
+  patientInformation,
+  activeViewportIndex,
+  children,
+}) => {
+  return (
+    <div className="flex flex-col h-full">
+      <ViewportActionBar isTracked modality={modality} />
+
+      {/* TODO: NOTIFICATION API DEFINITION - OHIF-112 */}
+      <Notification
+        text="Track all measurement for this series?"
+        type="info"
+        actionButtons={
+          <div>
+            <Button>No</Button>
+            <Button className="ml-2">No, do not ask again</Button>
+            <Button className="ml-2" color="primary">
+              Yes
+            </Button>
+          </div>
+        }
+      />
+    </div>
+  );
+};
+
+export default Viewport;

platform/ui/src/components/Viewport/index.js

@@ -0,0 +1,2 @@
+import Viewport from './Viewport';
+export default Viewport;

platform/ui/src/components/index.js

@@ -38,6 +38,7 @@ import Toolbar from './Toolbar';
 import ToolbarButton from './ToolbarButton';
 import Tooltip from './Tooltip';
 import Typography from './Typography';
+import Viewport from './Viewport';
 import ViewportActionBar from './ViewportActionBar';
 import ViewportGrid from './ViewportGrid';
 
@@ -82,6 +83,7 @@ export {
   ToolbarButton,
   Tooltip,
   Typography,
+  Viewport,
   ViewportActionBar,
   ViewportGrid,
 };