From ca8b2a3c4231398bf4099068bd0062c58fbfe775 Mon Sep 17 00:00:00 2001
From: Phuoc Nguyen <me@phuoc.ng>
Date: Sun, 17 Nov 2019 12:32:18 +0700
Subject: [PATCH] Add triangle placeholder

---
 client/placeholders/Triangle.jsx | 42 ++++++++++++++++++++++++++++++++
 1 file changed, 42 insertions(+)
 create mode 100644 client/placeholders/Triangle.jsx

diff --git a/client/placeholders/Triangle.jsx b/client/placeholders/Triangle.jsx
new file mode 100644
index 0000000..2ec78aa
--- /dev/null
+++ b/client/placeholders/Triangle.jsx
@@ -0,0 +1,42 @@
+import React from 'react';
+
+const Triangle = ({ size = 16, corner = 'tl' }) => {
+    let bw = '';
+    let bc = '';
+    switch (corner) {
+        case 'tr':
+            bw = `0 ${size}px ${size}px 0`;
+            bc = 'transparent rgba(0, 0, 0, .3) transparent transparent';
+            break;
+
+        case 'br':
+            bw = `0 0 ${size}px ${size}px`;
+            bc = 'transparent transparent rgba(0, 0, 0, .3) transparent';
+            break;
+
+        case 'bl':
+            bw = `${size}px 0 0 ${size}px`;
+            bc = 'transparent transparent transparent rgba(0, 0, 0, .3)';
+            break;
+
+        case 'tl':
+        default:
+            bw = `${size}px ${size}px 0 0`;
+            bc = 'rgba(0, 0, 0, .3) transparent transparent transparent';
+            break;
+    }
+
+    return (
+        <div
+            style={{
+                borderColor: bc,
+                borderStyle: 'solid',
+                borderWidth: bw,
+                height: 0,
+                width: 0,
+            }}
+        />
+    );
+};
+
+export default Triangle;