step4: right sidebar

Author: Clint Goodman

src/components/RightSidebar/Tile.js

@@ -0,0 +1,30 @@
+import React from "react";
+import Box from "../Box";
+import { css } from "emotion";
+import faker from "faker";
+import { getLorem } from "../../util/common";
+
+const tileStyles = css({
+  display: "flex",
+  alignItems: "center",
+  margin: 4,
+  "& > *": {
+    margin: 4,
+  },
+});
+
+const small = css({
+  fontSize: 10,
+});
+
+const Tile = () => (
+  <div className={tileStyles}>
+    <Box icon black />
+    <section>
+      <div>{faker.name.firstName()}</div>
+      <div className={small}>{getLorem(2, 3)}</div>
+    </section>
+  </div>
+);
+
+export default Tile;

src/components/RightSidebar/index.js

@@ -1,5 +1,10 @@
 import React from "react";
+import Tile from "./Tile";
 
-const RightSidebar = () => <aside>Right Sidebar</aside>;
+const TILES = 30;
+
+const RightSidebar = () => (
+  <aside>{new Array(TILES).fill(0).map((e, i) => <Tile key={i} />)}</aside>
+);
 
 export default RightSidebar;