From 5f1ef07da940681233cfcf3a7d660cf117c89ef9 Mon Sep 17 00:00:00 2001
From: Phuoc Nguyen <me@phuoc.ng>
Date: Sat, 16 Nov 2019 23:11:35 +0700
Subject: [PATCH] Add square placeholder

---
 client/Home.jsx                    |  7 +++++++
 client/covers/MediaObjectCover.jsx | 32 ++++++++++++++++++++++++++++++
 client/placeholders/Square.jsx     |  9 +++++++++
 3 files changed, 48 insertions(+)
 create mode 100644 client/covers/MediaObjectCover.jsx
 create mode 100644 client/placeholders/Square.jsx

diff --git a/client/Home.jsx b/client/Home.jsx
index d290548..e37cb2c 100644
--- a/client/Home.jsx
+++ b/client/Home.jsx
@@ -4,6 +4,7 @@ import { Link } from 'react-router-dom';
 import BadgeCover from './covers/BadgeCover';
 import CenterCover from './covers/CenterCover';
 import InputAddonCover from './covers/InputAddonCover';
+import MediaObjectCover from './covers/MediaObjectCover';
 import SidebarCover from './covers/SidebarCover';
 import StickyFooterCover from './covers/StickyFooterCover';
 import StickyHeaderCover from './covers/StickyHeaderCover';
@@ -75,6 +76,12 @@ const Home = () => {
                             <h4 className="f4 mv0 pt3">Input addon</h4>
                         </Link>
                     </div>
+                    <div className="pa2 w-20">
+                        <Link to="/media-object" className="link flex flex-column items-center justify-center bg-black-05 br2 ph3 pv4">
+                            <MediaObjectCover />
+                            <h4 className="f4 mv0 pt3">Media object</h4>
+                        </Link>
+                    </div>
                     <div className="pa2 w-20">
                         <Link to="/stepper-input" className="link flex flex-column items-center justify-center bg-black-05 br2 ph3 pv4">
                             <StepperInputCover />
diff --git a/client/covers/MediaObjectCover.jsx b/client/covers/MediaObjectCover.jsx
new file mode 100644
index 0000000..ca100b0
--- /dev/null
+++ b/client/covers/MediaObjectCover.jsx
@@ -0,0 +1,32 @@
+import React from 'react';
+
+import Frame from '../placeholders/Frame';
+import Line from '../placeholders/Line';
+import Square from '../placeholders/Square';
+
+const MediaObjectCover = () => {
+    return (
+        <Frame>
+            <div className="flex h-100 items-start pa2 w-100">
+                <div className="h2 w2 mr2">
+                    <Square />
+                </div>
+                <div className="flex-auto">
+                    <div className="w-100 mb1"><Line /></div>
+                    <div className="w-100 mb1"><Line /></div>
+                    <div className="w-80 mb3"><Line /></div>
+                    
+                    <div className="w-100 mb1"><Line /></div>
+                    <div className="w-100 mb1"><Line /></div>
+                    <div className="w-80 mb3"><Line /></div>
+                    
+                    <div className="w-100 mb1"><Line /></div>
+                    <div className="w-100 mb1"><Line /></div>
+                    <div className="w-80 mb1"><Line /></div>
+                </div>
+            </div>
+        </Frame>
+    );
+};
+
+export default MediaObjectCover;
diff --git a/client/placeholders/Square.jsx b/client/placeholders/Square.jsx
new file mode 100644
index 0000000..77efe70
--- /dev/null
+++ b/client/placeholders/Square.jsx
@@ -0,0 +1,9 @@
+import React from 'react';
+
+const Square = ({ size = 8 }) => {
+    return (
+        <div className="w-100 h-100 bg-black-30 br1" />
+    );
+};
+
+export default Square;