From 88a84f252dae483acb6a72ea129e9f5225ecb0ca Mon Sep 17 00:00:00 2001
From: Alfred Melch <dev@melch.pro>
Date: Sat, 14 Dec 2019 20:03:17 +0100
Subject: [PATCH] Add borderMarker

---
 src/components/PivotMarker.css | 11 +++++++++++
 src/components/PivotMarker.js  | 28 +++++++++++++++++++---------
 2 files changed, 30 insertions(+), 9 deletions(-)
 create mode 100644 src/components/PivotMarker.css

diff --git a/src/components/PivotMarker.css b/src/components/PivotMarker.css
new file mode 100644
index 0000000..464a1fa
--- /dev/null
+++ b/src/components/PivotMarker.css
@@ -0,0 +1,11 @@
+.border {
+  height: 2px;
+  background: black;
+}
+
+.marker {
+  height: 6px;
+  width: 2px;
+  background: black;
+  margin: 0 auto;
+}
diff --git a/src/components/PivotMarker.js b/src/components/PivotMarker.js
index 2d38e6e..1597a69 100644
--- a/src/components/PivotMarker.js
+++ b/src/components/PivotMarker.js
@@ -1,11 +1,21 @@
 import React from 'react'
 
-export const PipeMarker = ({ children }) => {
-  return (
-    <div>
-      <div style={{ textAlign: 'center' }}>|</div>
-      {children}
-      <div style={{ textAlign: 'center' }}>|</div>
-    </div>
-  )
-}
+import styles from './PivotMarker.css'
+
+export const PipeMarker = ({ children }) => (
+  <div>
+    <div style={{ textAlign: 'center' }}>|</div>
+    {children}
+    <div style={{ textAlign: 'center' }}>|</div>
+  </div>
+)
+
+export const BorderMarker = ({ children }) => (
+  <div>
+    <div className={styles.border}></div>
+    <div className={styles.marker}></div>
+    {children}
+    <div className={styles.marker}></div>
+    <div className={styles.border}></div>
+  </div>
+)