grid recent card initial

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;
+}