Add borderMarker

src/components/PivotMarker.css

@@ -0,0 +1,11 @@
+.border {
+  height: 2px;
+  background: black;
+}
+
+.marker {
+  height: 6px;
+  width: 2px;
+  background: black;
+  margin: 0 auto;
+}

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