Viewport grid component

platform/ui/index.js

@@ -46,6 +46,7 @@ export {
   ThumbnailSR,
   ThumbnailList,
   Typography,
+  ViewportGrid,
 } from './src/components';
 
 /** VIEWS */

platform/ui/src/components/ViewportGrid/ViewportGrid.jsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+
+const ViewportGrid = ({ rows, cols, viewportContents }) => {
+  const ViewportPanes = viewportContents.map((viewportContent, index) => {
+    return (
+      <div
+        key={index}
+        className={classnames(
+          'border rounded-lg border-secondary-light hover:border-primary-light'
+        )}
+      >
+        {viewportContent}
+      </div>
+    );
+  });
+
+  return (
+    <div
+      className={classnames(
+        'h-full w-full grid gap-2',
+        `grid-cols-${cols}`,
+        `grid-rows-${rows}`
+      )}
+    >
+      {ViewportPanes}
+    </div>
+  );
+};
+
+ViewportGrid.propTypes = {
+  rows: PropTypes.number.isRequired,
+  cols: PropTypes.number.isRequired,
+  viewportContents: PropTypes.arrayOf(PropTypes.node),
+};
+
+export default ViewportGrid;

platform/ui/src/components/ViewportGrid/ViewportGrid.mdx

@@ -0,0 +1,37 @@
+---
+name: ViewportGrid
+menu: General
+route: components/viewportGrid
+---
+
+import { Playground, Props } from 'docz';
+import { ViewportGrid } from '@ohif/ui';
+
+# ViewportGrid
+
+Used display viewports in the viewer page
+
+## Import
+
+```javascript
+import { ViewportGrid } from '@ohif/ui';
+```
+
+## Basic usage
+
+<Playground>
+  <div className="p-4 h-56">
+    <ViewportGrid
+      rows={1}
+      cols={2}
+      viewportContents={[
+        <div className="flex items-center justify-center h-full text-white">Viewport1</div>,
+        <div className="flex items-center justify-center h-full text-white">Viewport2</div>
+      ]}
+    />
+  </div>
+</Playground>
+
+## Properties
+
+<Props of={ViewportGrid} />

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

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

platform/ui/src/components/index.js

@@ -32,6 +32,7 @@ import Thumbnail from './Thumbnail';
 import ThumbnailSR from './ThumbnailSR';
 import ThumbnailList from './ThumbnailList';
 import Typography from './Typography';
+import ViewportGrid from './ViewportGrid';
 
 export {
   Button,
@@ -68,4 +69,5 @@ export {
   ThumbnailSR,
   ThumbnailList,
   Typography,
+  ViewportGrid,
 };