Structure of the pomodoros counter done

src/components/MainPomodoro.jsx

@@ -1,5 +1,6 @@
 import React, {useState} from 'react'
 import MainPomodoroTimer from './MainPomodoroTimer'
+import PomodoroCounter from './PomodoroCounter'
 import StyleSelector from './StyleSelector'
 
 const MainPomodoro = () => {
@@ -10,6 +11,8 @@ const MainPomodoro = () => {
     const [displayHidden, setDisplayHidden] = useState(true)
     const [timerOn, setTimerOn] = useState(false)
 
+    //const [counter, setCounter] 
+
     const showStyles = () => {
         console.log('Styles Deployed')
 
@@ -38,6 +41,7 @@ const MainPomodoro = () => {
             </div>
 
             <StyleSelector displayHidden={displayHidden} style={style} setStyle={setStyle}/>
+            <PomodoroCounter />
         </>
         
 

src/components/PomodoroCounter.jsx

@@ -0,0 +1,21 @@
+import React from 'react'
+
+const PomodoroCounter = () => {
+    return (
+        <div className="pomodoro-counter">
+            <ul>
+                <li>
+                    <span className="quantity">0</span><span className="separator"> - </span>Pomodoros
+                </li>
+                <li>
+                    <span className="quantity">0</span><span className="separator"> - </span>Rests
+                </li>
+                <li>
+                    <span className="quantity">0</span><span className="separator"> - </span>Long rests
+                </li>
+            </ul>
+        </div>
+    )
+}
+
+export default PomodoroCounter