Add sidebar layout

client/placeholders/Block.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+import random from '../helpers/random';
+import Rectangle from './Rectangle';
+
+const Block = ({ numberOfBlocks }) => {
+    return (
+        <div className="flex flex-wrap w-100">
+            {
+                Array(numberOfBlocks).fill(0).map((_, i) => {
+                    const s = random(1, 5);
+                    return (
+                        <div key={i} className={`mr2 mb2 w-${s * 10}`}>
+                            <Rectangle height={8} />
+                        </div>
+                    );
+                })
+            }
+        </div>
+    );
+};
+
+export default Block;

client/placeholders/Line.jsx

@@ -1,12 +1,10 @@
 import React from 'react';
 
-const Line = ({ size }) => {
-    const h = (size === 'medium' ? '2px' : '1px');
-
+const Line = () => {
     return (
         <div
             className="w-100 bg-black-30"
-            style={{ height: h }}
+            style={{ height: '1px' }}
         />
     );
 };

client/placeholders/Rectangle.jsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+const Rectangle = ({ height }) => {
+    return (
+        <div
+            className="w-100 bg-black-30 br-pill"
+            style={{ height: `${height}px` }}
+        />
+    );
+};
+
+export default Rectangle;