Flow cell

src/components/flow/FlowGrid/index.tsx

@@ -0,0 +1,31 @@
+import React, { FC } from 'react';
+import { Cell } from '~/components/flow/Cell';
+
+import * as styles from './styles.scss';
+import { IFlowState } from '~/redux/flow/reducer';
+
+type IProps = Partial<IFlowState> & {};
+
+export const FlowGrid: FC<IProps> = ({ nodes }) => (
+  <div>
+    <div className={styles.grid_test}>
+      <div className={styles.hero}>HERO</div>
+      <div className={styles.stamp}>STAMP</div>
+
+      {nodes.map(node => (
+        <Cell key={node.id} node={node} />
+      ))}
+    </div>
+  </div>
+);
+
+// {
+//   range(1, 20).map(el => (
+//     <Cell
+//       width={Math.floor(Math.random() * 2 + 1)}
+//       height={Math.floor(Math.random() * 2 + 1)}
+//       title={`Cell ${el}`}
+//       key={el}
+//     />
+//   ));
+// }

src/components/flow/FlowGrid/styles.scss

@@ -0,0 +1,49 @@
+$cols: $content_width / $cell;
+
+.grid {
+  padding: $gap / 2;
+  margin: 0 (-$gap / 2);
+}
+
+.grid_test {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  grid-template-rows: 360px;
+  grid-auto-rows: 256px;
+  grid-auto-flow: row dense;
+  grid-column-gap: $grid_line;
+  grid-row-gap: $grid_line;
+}
+
+.pad_last {
+  grid-column-end: $cols + 1;
+}
+
+.hero {
+  grid-row-start: 1;
+  grid-row-end: span 1;
+  grid-column-start: 0;
+  grid-column-end: span 4;
+  // gridRow: "1 / 2",
+  // gridColumn: "1 / -1",
+  background: darken($content_bg, 2%);
+  border-radius: $radius;
+  // height: 33vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font: $font_24_semibold;
+}
+
+.stamp {
+  // grid-row: -1 / 3;
+  grid-row-end: span 3;
+  grid-column: -2 / -1;
+  background: darken($content_bg, 8%);
+  border-radius: $radius;
+  padding: $gap;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font: $font_24_semibold;
+}