Merge pull request #105 from phuoc-ng/teardrop

Add teardrop pattern

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).

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',

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>

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;

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;

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>