From 7ec973cb95a65368ed222241574f4f9468bdf3ae Mon Sep 17 00:00:00 2001
From: Phuoc Nguyen <me@phuoc.ng>
Date: Sun, 17 Nov 2019 12:49:40 +0700
Subject: [PATCH] Add fixed at corner

---
 client/App.jsx                             |  2 +
 client/Home.jsx                            |  7 ++
 client/layouts/fixed-at-corner/Cover.jsx   | 18 +++++
 client/layouts/fixed-at-corner/Details.jsx | 83 ++++++++++++++++++++++
 4 files changed, 110 insertions(+)
 create mode 100644 client/layouts/fixed-at-corner/Cover.jsx
 create mode 100644 client/layouts/fixed-at-corner/Details.jsx

diff --git a/client/App.jsx b/client/App.jsx
index 50d48f1..1c92236 100644
--- a/client/App.jsx
+++ b/client/App.jsx
@@ -5,6 +5,7 @@ import Home from './Home';
 import Badge from './layouts/badge/Details';
 import ButtonWithIcon from './layouts/button-with-icon/Details';
 import Centering from './layouts/centering/Details';
+import FixedAtCorner from './layouts/fixed-at-corner/Details';
 import HolyGrail from './layouts/holy-grail/Details';
 import InputAddon from './layouts/input-add-on/Details';
 import MediaObject from './layouts/media-object/Details';
@@ -22,6 +23,7 @@ const App = () => {
                 <Route exact={true} path='/badge'><Badge /></Route>
                 <Route exact={true} path='/button-with-icon'><ButtonWithIcon /></Route>
                 <Route exact={true} path='/centering'><Centering /></Route>
+                <Route exact={true} path='/fixed-at-corner'><FixedAtCorner /></Route>
                 <Route exact={true} path='/holy-grail'><HolyGrail /></Route>
                 <Route exact={true} path='/input-add-on'><InputAddon /></Route>
                 <Route exact={true} path='/media-object'><MediaObject /></Route>
diff --git a/client/Home.jsx b/client/Home.jsx
index f9b10c8..35db4b9 100644
--- a/client/Home.jsx
+++ b/client/Home.jsx
@@ -4,6 +4,7 @@ import { Link } from 'react-router-dom';
 import BadgeCover from './layouts/badge/Cover';
 import ButtonWithIconCover from './layouts/button-with-icon/Cover';
 import CenterCover from './layouts/centering/Cover';
+import FixedAtCornerCover from './layouts/fixed-at-corner/Cover';
 import HolyGrailCover from './layouts/holy-grail/Cover';
 import InputAddonCover from './layouts/input-add-on/Cover';
 import MediaObjectCover from './layouts/media-object/Cover';
@@ -85,6 +86,12 @@ const Home = () => {
                             <h4 className="f4 mv0 pt3">Centering</h4>
                         </Link>
                     </div>
+                    <div className="pa1 w-20">
+                        <Link to="/fixed-at-corner" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
+                            <FixedAtCornerCover />
+                            <h4 className="f4 mv0 pt3">Fixed at corner</h4>
+                        </Link>
+                    </div>
                     <div className="pa1 w-20">
                         <Link to="/input-add-on" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
                             <InputAddonCover />
diff --git a/client/layouts/fixed-at-corner/Cover.jsx b/client/layouts/fixed-at-corner/Cover.jsx
new file mode 100644
index 0000000..0857f72
--- /dev/null
+++ b/client/layouts/fixed-at-corner/Cover.jsx
@@ -0,0 +1,18 @@
+import React from 'react';
+
+import Frame from '../../placeholders/Frame';
+import Triangle from '../../placeholders/Triangle';
+
+const Cover = () => {
+    return (
+        <Frame>
+            <div className="relative">
+                <div className="absolute top-0 left-0">
+                    <Triangle size={32} />
+                </div>
+            </div>
+        </Frame>
+    );
+};
+
+export default Cover;
diff --git a/client/layouts/fixed-at-corner/Details.jsx b/client/layouts/fixed-at-corner/Details.jsx
new file mode 100644
index 0000000..062bcc8
--- /dev/null
+++ b/client/layouts/fixed-at-corner/Details.jsx
@@ -0,0 +1,83 @@
+import React from 'react';
+
+import DetailsLayout from '../../DetailsLayout';
+import BrowserFrame from '../../placeholders/BrowserFrame';
+import Triangle from '../../placeholders/Triangle';
+import SampleCode from '../../SampleCode';
+import useDocumentTitle from '../../useDocumentTitle';
+
+const Details = () => {
+    useDocumentTitle('CSS Layout ∙ Fixed at corner');
+
+    return (
+        <DetailsLayout>
+            <h1 className="f1 tc">Fixed at corner</h1>
+            <BrowserFrame
+                content={
+                    <div className="relative h-100">
+                        <div className="absolute top-0 left-0">
+                            <Triangle size={64} corner="tl" />
+                        </div>
+                        <div className="absolute top-0 right-0">
+                            <Triangle size={64} corner="tr" />
+                        </div>
+                        <div className="absolute bottom-0 right-0">
+                            <Triangle size={64} corner="br" />
+                        </div>
+                        <div className="absolute bottom-0 left-0">
+                            <Triangle size={64} corner="bl" />
+                        </div>
+                    </div>
+                }
+                source={
+<SampleCode
+lang="html"
+code={`
+<div style="
+    position: relative;
+">
+    <!-- Top-left corner -->
+    <div style="
+        left: 0;
+        position: absolute;
+        top: 0;
+    ">
+        ...
+    </div>
+
+    <!-- Top-right corner -->
+    <div style="
+        position: absolute;
+        top: 0;
+        right: 0;
+    ">
+        ...
+    </div>
+
+    <!-- Bottom-right corner -->
+    <div style="
+        bottom: 0;
+        position: absolute;
+        right: 0;
+    ">
+        ...
+    </div>
+
+    <!-- Bottom-left corner -->
+    <div style="
+        bottom: 0;
+        left: 0;
+        position: absolute;
+    ">
+        ...
+    </div>
+</div>
+`}
+/>
+                }
+            />
+        </DetailsLayout>
+    );
+};
+
+export default Details;