Added hide to style selector and more modularizated the code

src/components/MainPomodoro.jsx

@@ -1,4 +1,5 @@
 import React, {useState} from 'react'
+import StyleSelector from './StyleSelector'
 
 const MainPomodoro = () => {
 
@@ -6,26 +7,39 @@ const MainPomodoro = () => {
     const [seconds, setSeconds] = useState('60')
 
     const [style, setStyle] = useState('Regular')
+    const [displayHidden, setDisplayHidden] = useState(true)
+
+    const showStyles = () => {
+        console.log('Styles Deployed')
+
+        setDisplayHidden(!displayHidden)
+    }
 
     return (
-        <div className="main-pomodoro">
-            <div className="timer">
-                <div className="minutes">{minutes}</div>
-                <div className="separator">:</div>
-                <div className="seconds">{seconds}</div>
+        <>
+            <div className="main-pomodoro">
+                <div className="timer">
+                    <div className="minutes">{minutes}</div>
+                    <div className="separator">:</div>
+                    <div className="seconds">{seconds}</div>
+                </div>
+
+                <div className="style-display">
+                    <h4>
+                        Style
+                    </h4>
+                    <h3 onClick={showStyles}>
+                        {style}
+                    </h3>
+                </div>
+
+                <button class="start-pomodoro">START</button>
             </div>
 
-            <div className="style-display">
-                <h4>
-                    Style
-                </h4>
-                <h3>
-                    {style}
-                </h3>
-            </div>
+            <StyleSelector displayHidden={displayHidden}/>
+        </>
+        
 
-            <button class="start-pomodoro">START</button>
-        </div>
     )
 }