feat: start viewport boxes

ccontrols · Jun 20, 2020 · 25109e3 · 25109e3
1 parent 8d93112
commit 25109e3
Showing 1 changed file with 35 additions and 10 deletions.
diff --git a/plugins/viewport-plugin/src/index.tsx b/plugins/viewport-plugin/src/index.tsx
@@ -4,18 +4,43 @@ import { Box, jsx } from 'theme-ui';
 
 export const ViewportBlock: FC = () => {
   return (
-    <div>
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: 'row',
+        minHeight: '200px',
+        height: '100%',
+        width: '100%',
+        overflowX: 'auto',
+        overflowY: 'hidden',
+        padding: '3px',
+        background: '#f4f4f4',
+      }}
+    >
       <Box
-        color="black"
-        bg="#e6e5e5"
-        p={40}
         sx={{
-          width: '2000px',
-          height: '300px',
+          height: '100%',
+          minWidth: '250px',
+          margin: '20px',
+          background: 'gray',
         }}
-      >
-        content here
-      </Box>
-    </div>
+      ></Box>
+      <Box
+        sx={{
+          height: '100%',
+          minWidth: '500px',
+          margin: '20px',
+          background: 'gray',
+        }}
+      ></Box>
+      <Box
+        sx={{
+          height: '100%',
+          minWidth: '900px',
+          margin: '20px',
+          background: 'gray',
+        }}
+      ></Box>
+    </Box>
   );
 };