From c7a48f93a62b03c4b26791effc841b53d8afe387 Mon Sep 17 00:00:00 2001
From: Phuoc Nguyen <me@phuoc.ng>
Date: Mon, 30 Dec 2019 21:55:32 +0700
Subject: [PATCH 1/2] Note about lint command

---
 README.md | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/README.md b/README.md
index 4b85acd..5afc146 100644
--- a/README.md
+++ b/README.md
@@ -70,6 +70,14 @@ Visit http://localhost:1234 to see it in action.
 
 PRs are welcomed. If you thing there are any missing useful layouts or patterns, please create an issue or submit a PR.
 
+It's important to note that you should run the following command to lint the code:
+
+~~~
+$ npm run lint
+~~~
+
+If there is any issue, it will be logged in the `tslint.log` file.
+
 ## About
 
 This project is developed by [Nguyen Huu Phuoc](https://twitter.com/nghuuphuoc).

From 2096dce5bcafccd7074800e9429454ad1009b3a5 Mon Sep 17 00:00:00 2001
From: Phuoc Nguyen <me@phuoc.ng>
Date: Mon, 30 Dec 2019 21:55:58 +0700
Subject: [PATCH 2/2] Add teardrop pattern

---
 client/constants/Pattern.ts          |  1 +
 client/pages/ExplorePage.tsx         |  1 +
 client/patterns/teardrop/Cover.tsx   | 35 ++++++++++++
 client/patterns/teardrop/Details.tsx | 81 ++++++++++++++++++++++++++++
 public/sitemap.xml                   |  1 +
 5 files changed, 119 insertions(+)
 create mode 100644 client/patterns/teardrop/Cover.tsx
 create mode 100644 client/patterns/teardrop/Details.tsx

diff --git a/client/constants/Pattern.ts b/client/constants/Pattern.ts
index 7034517..7eecbd0 100644
--- a/client/constants/Pattern.ts
+++ b/client/constants/Pattern.ts
@@ -71,6 +71,7 @@ enum Pattern {
     StickyTableHeaders = 'Sticky table headers',
     Switch = 'Switch',
     Tab = 'Tab',
+    Teardrop = 'Teardrop',
     Timeline = 'Timeline',
     TogglePasswordVisibility = 'Toggle password visibility',
     Tooltip = 'Tooltip',
diff --git a/client/pages/ExplorePage.tsx b/client/pages/ExplorePage.tsx
index 3602201..35046ad 100644
--- a/client/pages/ExplorePage.tsx
+++ b/client/pages/ExplorePage.tsx
@@ -171,6 +171,7 @@ const ExplorePage = () => {
                         <CoverCard pattern={Pattern.StackedCards} />
                         <CoverCard pattern={Pattern.StickyTableColumn} />
                         <CoverCard pattern={Pattern.StickyTableHeaders} />
+                        <CoverCard pattern={Pattern.Teardrop} />
                         <CoverCard pattern={Pattern.Timeline} />
                         <CoverCard pattern={Pattern.VideoBackground} />
                     </div>
diff --git a/client/patterns/teardrop/Cover.tsx b/client/patterns/teardrop/Cover.tsx
new file mode 100644
index 0000000..261882c
--- /dev/null
+++ b/client/patterns/teardrop/Cover.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+
+import Frame from '../../placeholders/Frame';
+
+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: '2px solid rgba(0, 0, 0, 0.3)',
+                        borderRadius: '0 50% 50% 50%',
+                        display: 'flex',
+                        height: '32px',
+                        justifyContent: 'center',
+                        transform: 'rotate(45deg)',
+                        width: '32px',
+                    }}
+                />
+            </div>
+        </Frame>
+    );
+};
+
+export default Cover;
diff --git a/client/patterns/teardrop/Details.tsx b/client/patterns/teardrop/Details.tsx
new file mode 100644
index 0000000..1b2941f
--- /dev/null
+++ b/client/patterns/teardrop/Details.tsx
@@ -0,0 +1,81 @@
+import React from 'react';
+import { Helmet } from 'react-helmet';
+
+import DetailsLayout from '../../layouts/DetailsLayout';
+import BrowserFrame from '../../placeholders/BrowserFrame';
+import Circle from '../../placeholders/Circle';
+
+const Details: React.FC<{}> = () => {
+    return (
+        <DetailsLayout title="Teardrop">
+            <Helmet>
+                <meta name="description" content="Create a teardrop with CSS" />
+                <meta
+                    name="keywords"
+                    content="css border radius, css teardrop, css water drop shape, css water droplet"
+                />
+            </Helmet>
+            <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: '2px solid rgba(0, 0, 0, 0.3)',
+                                    borderRadius: '0 50% 50% 50%',
+                                    display: 'flex',
+                                    height: '64px',
+                                    justifyContent: 'center',
+                                    transform: 'rotate(45deg)',
+                                    width: '64px',
+                                }}
+                            >
+                                <div style={{ transform: 'rotate(-45deg)' }}>
+                                    <Circle />
+                                </div>
+                            </div>
+                        </div>
+                    )}
+                    source={`
+<div style="
+    /* Center the content */
+    align-items: center;
+    display: flex;
+    justify-content: center;
+
+    /* Border */
+    border: 2px solid rgba(0, 0, 0, 0.3);
+    border-radius: 0px 50% 50% 50%;
+
+    /* Angle at the top */
+    transform: rotate(45deg);
+
+    /* Size */
+    height: 64px;
+    width: 64px;
+">
+    <!-- Display the content vertically -->
+    <div style="
+        transform: rotate(-45deg);
+    ">
+        ...
+    </div>
+</div>
+`}
+                />
+            </div>
+        </DetailsLayout>
+    );
+};
+
+export default Details;
diff --git a/public/sitemap.xml b/public/sitemap.xml
index e4aa7b1..4100d16 100644
--- a/public/sitemap.xml
+++ b/public/sitemap.xml
@@ -72,6 +72,7 @@
     <url><loc>https://csslayout.io/patterns/sticky-table-headers</loc></url>
     <url><loc>https://csslayout.io/patterns/switch</loc></url>
     <url><loc>https://csslayout.io/patterns/tab</loc></url>
+    <url><loc>https://csslayout.io/patterns/teardrop</loc></url>
     <url><loc>https://csslayout.io/patterns/timeline</loc></url>
     <url><loc>https://csslayout.io/patterns/toggle-password-visibility</loc></url>
     <url><loc>https://csslayout.io/patterns/tooltip</loc></url>