Style selector logic added

src/components/MainPomodoro.jsx

@@ -16,8 +16,6 @@ const MainPomodoro = () => {
         setDisplayHidden(!displayHidden)
     }
 
-    console.log(timerOn)
-
     return (
         <>
             <div className="main-pomodoro">
@@ -39,7 +37,7 @@ const MainPomodoro = () => {
                 }</button>
             </div>
 
-            <StyleSelector displayHidden={displayHidden}/>
+            <StyleSelector displayHidden={displayHidden} style={style} setStyle={setStyle}/>
         </>
         
 

src/components/MainPomodoroTimer.jsx

@@ -7,6 +7,14 @@ const MainPomodoroTimer = (props) => {
     const [seconds, setSeconds] = useState('60')
     
     const setTimeStyle = () => {
+
+        if (props.style === 'Can I play, Daddy?') {
+            const minutes = 10
+            const seconds = 0
+            
+            setMinutes(minutes)
+            setSeconds(seconds)
+        }
         
         if (props.style === 'Regular'){
             
@@ -17,6 +25,22 @@ const MainPomodoroTimer = (props) => {
             setSeconds(seconds)
 
         }
+
+        if (props.style === 'Creative work') {
+            const minutes = 50
+            const seconds = 0
+            
+            setMinutes(minutes)
+            setSeconds(seconds)
+        }
+
+        if (props.style === 'Last minute delivery') {
+            const minutes = 90
+            const seconds = 0
+            
+            setMinutes(minutes)
+            setSeconds(seconds)
+        }
         
     }
 

src/components/StyleSelectionChildren.jsx

@@ -2,9 +2,24 @@ import React from 'react'
 
 const StyleSelectionChildren = (props) => {
     return (
-        <div className="style-container">
+        <div 
+        className="style-container"
+        onClick = { (e) => {
+            props.setStyle(props.title)
+        }}
+        >
+
             <span class="checkbox__input">
-                <input id={`input-${props.number}`} type="checkbox"></input>
+                <input
+                id={`input-${props.number}`}
+                type="checkbox"
+                checked=
+                {
+                    props.style === props.title ? true : false
+                }
+
+                >
+                </input>
                 <span className="checkbox_control"></span>
             </span>
             <label for={`input-${props.number}`}>

src/components/StyleSelector.jsx

@@ -7,10 +7,10 @@ const StyleSelector = (props) => {
             <h2>Select Style</h2>
         
             <div className="style-selection-container">
-                <StyleSelectionChildren number={1} title={"Title 1"} times={"Times|Times"}/>
-                <StyleSelectionChildren number={2} title={"Title 2"} times={"Times|Times"}/>
-                <StyleSelectionChildren number={3} title={"Title 3"} times={"Times|Times"}/>
-                <StyleSelectionChildren number={4} title={"Title 4"} times={"Times|Times"}/>
+                <StyleSelectionChildren number={1} title={"Can I play, Daddy?"} times={"10 min. | 5 min. | 15 min."} style={props.style} setStyle={props.setStyle}/>
+                <StyleSelectionChildren number={2} title={"Regular"} times={"25 min. | 5 min. | 15 min."} style={props.style} setStyle={props.setStyle}/>
+                <StyleSelectionChildren number={3} title={"Creative work"} times={"50 min. | 10 min. | 20 min."} style={props.style} setStyle={props.setStyle}/>
+                <StyleSelectionChildren number={4} title={"Last minute delivery"} times={"90 min. | 15 min. | 30 min."} style={props.style} setStyle={props.setStyle}/>
             </div>
         </div>
     )