From d13c2f6a699e43e6b405668908324388eeda473b Mon Sep 17 00:00:00 2001
From: Gustavo Lelis <galelis@gmail.com>
Date: Mon, 13 Apr 2020 07:44:38 -0300
Subject: [PATCH] Viewport grid component

---
 platform/ui/index.js                          |  1 +
 .../components/ViewportGrid/ViewportGrid.jsx  | 38 +++++++++++++++++++
 .../components/ViewportGrid/ViewportGrid.mdx  | 37 ++++++++++++++++++
 .../ui/src/components/ViewportGrid/index.js   |  2 +
 platform/ui/src/components/index.js           |  2 +
 5 files changed, 80 insertions(+)
 create mode 100644 platform/ui/src/components/ViewportGrid/ViewportGrid.jsx
 create mode 100644 platform/ui/src/components/ViewportGrid/ViewportGrid.mdx
 create mode 100644 platform/ui/src/components/ViewportGrid/index.js

diff --git a/platform/ui/index.js b/platform/ui/index.js
index 10dbaf413..f683f8bdf 100644
--- a/platform/ui/index.js
+++ b/platform/ui/index.js
@@ -46,6 +46,7 @@ export {
   ThumbnailSR,
   ThumbnailList,
   Typography,
+  ViewportGrid,
 } from './src/components';
 
 /** VIEWS */
diff --git a/platform/ui/src/components/ViewportGrid/ViewportGrid.jsx b/platform/ui/src/components/ViewportGrid/ViewportGrid.jsx
new file mode 100644
index 000000000..75d5fad8d
--- /dev/null
+++ b/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;
diff --git a/platform/ui/src/components/ViewportGrid/ViewportGrid.mdx b/platform/ui/src/components/ViewportGrid/ViewportGrid.mdx
new file mode 100644
index 000000000..51789d388
--- /dev/null
+++ b/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} />
diff --git a/platform/ui/src/components/ViewportGrid/index.js b/platform/ui/src/components/ViewportGrid/index.js
new file mode 100644
index 000000000..7163e6995
--- /dev/null
+++ b/platform/ui/src/components/ViewportGrid/index.js
@@ -0,0 +1,2 @@
+import ViewportGrid from './ViewportGrid';
+export default ViewportGrid;
diff --git a/platform/ui/src/components/index.js b/platform/ui/src/components/index.js
index 8bb14ec05..3e9ec6efd 100644
--- a/platform/ui/src/components/index.js
+++ b/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,
 };