From 0d4e44405a93275123ab5ba38e587ad91d3294d2 Mon Sep 17 00:00:00 2001
From: Phuoc Nguyen <me@phuoc.ng>
Date: Wed, 27 Nov 2019 23:41:20 +0700
Subject: [PATCH] Add drop area

---
 client/App.tsx                        |  1 +
 client/Explore.tsx                    |  1 +
 client/Home.tsx                       |  1 +
 client/constants/Pattern.ts           |  1 +
 client/patterns/drop-area/Cover.tsx   | 40 ++++++++++++++++++
 client/patterns/drop-area/Details.tsx | 61 +++++++++++++++++++++++++++
 public/sitemap.xml                    |  1 +
 7 files changed, 106 insertions(+)
 create mode 100644 client/patterns/drop-area/Cover.tsx
 create mode 100644 client/patterns/drop-area/Details.tsx

diff --git a/client/App.tsx b/client/App.tsx
index 674f6c6..bb5912c 100644
--- a/client/App.tsx
+++ b/client/App.tsx
@@ -22,6 +22,7 @@ const App = () => {
                 <Route exact={true} path='/docked-at-corner'><DetailsLoader pattern={Pattern.DockedAtCorner} /></Route>
                 <Route exact={true} path='/dot-leader'><DetailsLoader pattern={Pattern.DotLeader} /></Route>
                 <Route exact={true} path='/dot-navigation'><DetailsLoader pattern={Pattern.DotNavigation} /></Route>
+                <Route exact={true} path='/drop-area'><DetailsLoader pattern={Pattern.DropArea} /></Route>
                 <Route exact={true} path='/feature-list'><DetailsLoader pattern={Pattern.FeatureList} /></Route>
                 <Route exact={true} path='/fixed-at-corner'><DetailsLoader pattern={Pattern.FixedAtCorner} /></Route>
                 <Route exact={true} path='/holy-grail'><DetailsLoader pattern={Pattern.HolyGrail} /></Route>
diff --git a/client/Explore.tsx b/client/Explore.tsx
index d9beaf2..51a6ace 100644
--- a/client/Explore.tsx
+++ b/client/Explore.tsx
@@ -93,6 +93,7 @@ const Home = () => {
                         <CoverCard pattern={Pattern.DockedAtCorner} />
                         <CoverCard pattern={Pattern.DotLeader} />
                         <CoverCard pattern={Pattern.DotNavigation} />
+                        <CoverCard pattern={Pattern.DropArea} />
                         <CoverCard pattern={Pattern.FeatureList} />
                         <CoverCard pattern={Pattern.FixedAtCorner} />
                         <CoverCard pattern={Pattern.InputAddOn} />
diff --git a/client/Home.tsx b/client/Home.tsx
index f4c1ae7..f7abc74 100644
--- a/client/Home.tsx
+++ b/client/Home.tsx
@@ -205,6 +205,7 @@ const Home = () => {
                         <CoverCard pattern={Pattern.DockedAtCorner} />
                         <CoverCard pattern={Pattern.DotLeader} />
                         <CoverCard pattern={Pattern.DotNavigation} />
+                        <CoverCard pattern={Pattern.DropArea} />
                         <CoverCard pattern={Pattern.FeatureList} />
                         <CoverCard pattern={Pattern.FixedAtCorner} />
                         <CoverCard pattern={Pattern.InputAddOn} />
diff --git a/client/constants/Pattern.ts b/client/constants/Pattern.ts
index f78e91b..921e78e 100644
--- a/client/constants/Pattern.ts
+++ b/client/constants/Pattern.ts
@@ -7,6 +7,7 @@ enum Pattern {
     DockedAtCorner = 'Docked at corner',
     DotLeader = 'Dot leader',
     DotNavigation = 'Dot navigation',
+    DropArea = 'Drop area',
     FeatureList = 'Feature list',
     FixedAtCorner = 'Fixed at corner',
     HolyGrail = 'Holy grail',
diff --git a/client/patterns/drop-area/Cover.tsx b/client/patterns/drop-area/Cover.tsx
new file mode 100644
index 0000000..7575374
--- /dev/null
+++ b/client/patterns/drop-area/Cover.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+
+import Frame from '../../placeholders/Frame';
+import Line from '../../placeholders/Line';
+
+const Cover: React.FC<{}> = () => {
+    return (
+        <Frame>
+            <div
+                style={{
+                    alignItems: 'center',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    height: '100%',
+                    justifyContent: 'center',
+                    padding: '8px',
+                }}
+            >
+                <div
+                    style={{
+                        alignItems: 'center',
+                        border: '4px dashed rgba(0, 0, 0, 0.3)',
+                        borderRadius: '4px',
+                        display: 'flex',
+                        flexDirection: 'column',
+                        height: '100%',
+                        justifyContent: 'center',
+                        width: '100%',
+                    }}
+                >
+                    <div style={{ marginBottom: '4px', width: '60%' }}><Line /></div>
+                    <div style={{ marginBottom: '4px', width: '50%' }}><Line /></div>
+                    <div style={{ width: '30%' }}><Line /></div>
+                </div>
+            </div>
+        </Frame>
+    );
+};
+
+export default Cover;
diff --git a/client/patterns/drop-area/Details.tsx b/client/patterns/drop-area/Details.tsx
new file mode 100644
index 0000000..b7310f9
--- /dev/null
+++ b/client/patterns/drop-area/Details.tsx
@@ -0,0 +1,61 @@
+import React from 'react';
+
+import DetailsLayout from '../../layouts/DetailsLayout';
+import Block from '../../placeholders/Block';
+import BrowserFrame from '../../placeholders/BrowserFrame';
+
+const Details: React.FC<{}> = () => {
+    return (
+        <DetailsLayout title="Drop area">
+            <div style={{ padding: '64px 32px' }}>
+                <BrowserFrame
+                    content={(
+                        <div
+                            style={{
+                                alignItems: 'center',
+                                display: 'flex',
+                                flexDirection: 'column',
+                                height: '100%',
+                                justifyContent: 'center',
+                                padding: '8px',
+                            }}
+                        >
+                            <div
+                                style={{
+                                    alignItems: 'center',
+                                    border: '4px dashed rgba(0, 0, 0, 0.3)',
+                                    borderRadius: '4px',
+                                    display: 'flex',
+                                    flexDirection: 'column',
+                                    height: '80%',
+                                    justifyContent: 'center',
+                                    width: '80%',
+                                }}
+                            >
+                                <div style={{ width: '40%' }}>
+                                    <Block justify='center' numberOfBlocks={10} />
+                                </div>
+                            </div>
+                        </div>
+                    )}
+                    source={`
+<div style="
+    /* Content is centered */
+    align-items: center;
+    display: flex;
+    justify-content: center;
+
+    /* Border */
+    border: 4px dashed rgba(0, 0, 0, 0.3),
+    border-radius: 4px;
+">
+    ...
+</div>
+`}
+                />
+            </div>
+        </DetailsLayout>
+    );
+};
+
+export default Details;
diff --git a/public/sitemap.xml b/public/sitemap.xml
index 47dbba3..225bf0d 100644
--- a/public/sitemap.xml
+++ b/public/sitemap.xml
@@ -11,6 +11,7 @@
     <url><loc>https://csslayout.io/centering</loc></url>
     <url><loc>https://csslayout.io/docked-at-corner</loc></url>
     <url><loc>https://csslayout.io/dot-navigation</loc></url>
+    <url><loc>https://csslayout.io/drop-area</loc></url>
     <url><loc>https://csslayout.io/feature-list</loc></url>
     <url><loc>https://csslayout.io/fixed-at-corner</loc></url>
     <url><loc>https://csslayout.io/input-addon</loc></url>