diff --git a/src/components/RsvpOptions.js b/src/components/Options.js
similarity index 95%
rename from src/components/RsvpOptions.js
rename to src/components/Options.js
index 5394ebd..9a8fcf7 100644
--- a/src/components/RsvpOptions.js
+++ b/src/components/Options.js
@@ -3,7 +3,7 @@ import { useSelector, useDispatch } from 'react-redux'
import { setMaxLength, setWpm } from '../store/actions'
-export const RsvpOptions = () => {
+export const Options = () => {
const dispatch = useDispatch()
const maxLength = useSelector(state => state.maxLength)
const wpm = useSelector(state => state.wpm)
diff --git a/src/components/RsvpPlayer.js b/src/components/PlayerControl.js
similarity index 69%
rename from src/components/RsvpPlayer.js
rename to src/components/PlayerControl.js
index 8bc0a26..f3d1013 100644
--- a/src/components/RsvpPlayer.js
+++ b/src/components/PlayerControl.js
@@ -11,7 +11,7 @@ import { FiPlay, FiPause, FiSquare } from 'react-icons/fi'
import { useInterval } from './generics/useInterval'
import { IconButton } from '../styles/IconButton'
-export const RsvpPlayer = () => {
+export const PlayerControl = () => {
const dispatch = useDispatch()
const running = useSelector(selectRunning)
const hasNext = useSelector(hasNextSegment)
@@ -26,15 +26,13 @@ export const RsvpPlayer = () => {
)
return (
-
-
- dispatch(stop())} />
- dispatch(running ? pause() : start())}
- disabled={!hasNext}
- />
-
-
+ <>
+ dispatch(stop())} />
+ dispatch(running ? pause() : start())}
+ disabled={!hasNext}
+ />
+ >
)
}
diff --git a/src/components/RsvpReader.js b/src/components/RsvpReader.js
index 4f56dca..04925c9 100644
--- a/src/components/RsvpReader.js
+++ b/src/components/RsvpReader.js
@@ -1,10 +1,10 @@
import React from 'react'
import { TextInput } from './TextInput'
import { TextOutput } from './TextOutput'
-import { MainControl } from './MainControl'
+import { SegmentControl } from './SegmentControl'
import { RsvpSegment } from './RsvpSegment'
-import { RsvpOptions } from './RsvpOptions'
-import { RsvpPlayer } from './RsvpPlayer'
+import { Options } from './Options'
+import { PlayerControl } from './PlayerControl'
import styles from './RsvpReader.css'
@@ -16,9 +16,10 @@ export const RsvpReader = () => {
diff --git a/src/components/MainControl.js b/src/components/SegmentControl.js
similarity index 93%
rename from src/components/MainControl.js
rename to src/components/SegmentControl.js
index 7e76000..9b12ea8 100644
--- a/src/components/MainControl.js
+++ b/src/components/SegmentControl.js
@@ -16,7 +16,7 @@ import {
decrementWord
} from '../store/actions'
-export const MainControl = () => {
+export const SegmentControl = ({ children }) => {
const dispatch = useDispatch()
return (
@@ -30,6 +30,7 @@ export const MainControl = () => {
title="Previous Word"
onClick={() => dispatch(decrementWord())}
/>
+ {children}