Add segment styling

src/App.js

@@ -2,8 +2,6 @@ import React from 'react'
 
 import { RsvpReader } from './components/RsvpReader'
 
-import { IconContext } from 'react-icons'
-
 export const App = () => {
   return <RsvpReader></RsvpReader>
 }

src/components/Options.js

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react'
+import React from 'react'
 import { useSelector, useDispatch } from 'react-redux'
 import { debounce } from 'debounce'
 

src/components/PivotMarker.js

@@ -0,0 +1,11 @@
+import React from 'react'
+
+export const PipeMarker = ({ children }) => {
+  return (
+    <div>
+      <div style={{ textAlign: 'center' }}>|</div>
+      {children}
+      <div style={{ textAlign: 'center' }}>|</div>
+    </div>
+  )
+}

src/components/RsvpReader.js

@@ -2,11 +2,12 @@ import React from 'react'
 import { TextInput } from './TextInput'
 import { TextOutput } from './TextOutput'
 import { SegmentControl } from './SegmentControl'
-import { RsvpSegment } from './RsvpSegment'
+import { Segment } from './Segment'
 import { Options } from './Options'
 import { PlayerControl } from './PlayerControl'
 
 import styles from './RsvpReader.css'
+import { PipeMarker } from './PivotMarker'
 
 export const RsvpReader = () => {
   return (
@@ -15,7 +16,9 @@ export const RsvpReader = () => {
         <TextInput />
       </div>
       <div className={styles.mainItem}>
-        <RsvpSegment />
+        <PipeMarker>
+          <Segment />
+        </PipeMarker>
         <SegmentControl>
           <PlayerControl />
         </SegmentControl>

src/components/RsvpSegment.js

@@ -1,8 +0,0 @@
-import React from 'react'
-import { useSelector } from 'react-redux'
-import { selectCurrentSegment } from '../store/selectors'
-
-export const RsvpSegment = () => {
-  const segment = useSelector(selectCurrentSegment)
-  return <div>{segment}</div>
-}

src/components/Segment.css

@@ -0,0 +1,14 @@
+.container {
+  display: flex;
+  font-size: 2.4em;
+}
+.pivot {
+  color: red;
+}
+.prefix {
+  flex: 1;
+  text-align: right;
+}
+.suffix {
+  flex: 1;
+}

src/components/Segment.js

@@ -0,0 +1,16 @@
+import React from 'react'
+import { useSelector } from 'react-redux'
+import { selectPivotizedSegment } from '../store/selectors'
+
+import styles from './Segment.css'
+
+export const Segment = () => {
+  const [prefix, pivot, suffix] = useSelector(selectPivotizedSegment)
+  return (
+    <div className={styles.container}>
+      <span className={styles.prefix}>{prefix}</span>
+      <span className={styles.pivot}>{pivot}</span>
+      <span className={styles.suffix}>{suffix}</span>
+    </div>
+  )
+}

src/components/Slider.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useLayoutEffect, useRef } from 'react'
+import React, { useState, useEffect, useRef } from 'react'
 
 import styles from './Slider.css'
 

src/store/selectors.js

@@ -2,6 +2,7 @@ import { createSelector } from 'reselect'
 import { parseText } from '../lib/parseText'
 
 import { getNextBiggerNumber, getNextSmallerNumber } from '../lib/array-util.js'
+import { pivotize } from '../lib/pivotize'
 
 // parsedText selectors
 
@@ -26,6 +27,11 @@ export const selectCurrentSegment = createSelector(
   (parsedText, curIdx) => parsedText.segments[curIdx]
 )
 
+export const selectPivotizedSegment = createSelector(
+  selectCurrentSegment,
+  pivotize
+)
+
 export const hasNextSegment = createSelector(
   selectSegments,
   selectCurrentSegmentIndex,