grid recent card initial

src/components/flow/FlowGrid/index.tsx

@@ -16,14 +16,21 @@ type IProps = Partial<IFlowState> & {
   onChangeCellView: typeof flowSetCellView;
 };
 
-export const FlowGrid: FC<IProps> = ({ user, nodes, heroes, recent, onSelect, onChangeCellView }) => (
+export const FlowGrid: FC<IProps> = ({
+  user,
+  nodes,
+  heroes,
+  recent,
+  onSelect,
+  onChangeCellView,
+}) => (
   <div>
     <div className={styles.grid_test}>
       <div className={styles.hero}>
         <FlowHero heroes={heroes} />
       </div>
       <div className={styles.stamp}>
-        <FlowRecent />
+        <FlowRecent recent={recent} />
       </div>
 
       {nodes.map(node => (

src/components/flow/FlowGrid/styles.scss

@@ -73,7 +73,7 @@ $cols: $content_width / $cell;
 
 .stamp {
   // grid-row: -1 / 3;
-  grid-row-end: span 3;
+  grid-row-end: span 2;
   grid-column: -2 / -1;
   background: darken($content_bg, 8%);
   border-radius: $radius;
@@ -82,4 +82,7 @@ $cols: $content_width / $cell;
   align-items: center;
   justify-content: center;
   font: $font_24_semibold;
+  display: flex;
+  align-items: stretch;
+  justify-content: stretch;
 }

src/components/flow/FlowRecent/index.tsx

@@ -1,8 +1,21 @@
 import React, { FC } from 'react';
 import * as styles from './styles.scss';
+import { IFlowState } from '~/redux/flow/reducer';
 
-interface IProps {}
+interface IProps {
+  recent: IFlowState['recent'];
+}
 
-const FlowRecent: FC<IProps> = ({}) => <div className={styles.grid} />;
+const FlowRecent: FC<IProps> = ({ recent }) => (
+  <div className={styles.grid}>
+    {recent &&
+      recent.slice(0, 9).map(node => (
+        <div key={node.id} className={styles.item}>
+          <div className={styles.thumb} />
+          <div className={styles.info}>{node.title}</div>
+        </div>
+      ))}
+  </div>
+);
 
 export { FlowRecent };

src/components/flow/FlowRecent/styles.scss

@@ -1,3 +1,36 @@
 .grid {
   display: grid;
+  grid-template-rows: repeat(9, 1fr);
+  grid-template-columns: auto;
+  row-gap: $grid_line;
+  justify-content: stretch;
+  flex: 1;
+
+  & > div {
+    // background: $content_bg;
+    // @include outer_shadow();
+    // background: darken($content_bg, 4%);
+  }
+}
+
+.item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font: $font_12_regular;
+  border-radius: $radius;
+  flex-direction: row;
+}
+
+.thumb {
+  height: 100%;
+  width: 40px;
+  margin-right: $grid_line;
+  // padding-left: 100%;
+  background: red;
+  // flex:
+}
+
+.info {
+  flex: 1;
 }

src/containers/flow/FlowLayout/index.tsx

@@ -8,7 +8,7 @@ import pick from 'ramda/es/pick';
 import { selectUser } from '~/redux/auth/selectors';
 
 const mapStateToProps = state => ({
-  flow: pick(['nodes', 'heroes'], selectFlow(state)),
+  flow: pick(['nodes', 'heroes', 'recent'], selectFlow(state)),
   user: pick(['role', 'id'], selectUser(state)),
 });
 
@@ -20,7 +20,7 @@ const mapDispatchToProps = {
 type IProps = ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps & {};
 
 const FlowLayoutUnconnected: FC<IProps> = ({
-  flow: { nodes, heroes },
+  flow: { nodes, heroes, recent },
   user,
   nodeLoadNode,
   flowSetCellView,
@@ -28,6 +28,7 @@ const FlowLayoutUnconnected: FC<IProps> = ({
   <FlowGrid
     nodes={nodes}
     heroes={heroes}
+    recent={recent}
     onSelect={nodeLoadNode}
     user={user}
     onChangeCellView={flowSetCellView}