initial commit

src/components/Button/Button.module.css

@@ -0,0 +1,23 @@
+button.button {
+    width: 48px;
+    height: 48px;
+    border-radius: 8px;
+    background-color: #AB71ED;
+    color: #FFFFFF;
+    font-size: 16px;
+    padding: 10px;
+    text-align: center;
+    outline: none;
+    border: none;
+    line-height: 16px;
+    font-weight: bold;
+    font-family: 'Montserrat';
+}
+
+button.button:hover {
+    background-color: #9B59E6;
+}
+
+button.button:active {
+    transform: translateY(1px);
+}

src/components/Button/Button.tsx

@@ -0,0 +1,17 @@
+import { ButtonHTMLAttributes, DetailedHTMLProps } from 'react'
+import styles from './Button.module.css'
+
+type ButtonProps = DetailedHTMLProps<
+    ButtonHTMLAttributes<HTMLButtonElement>,
+    HTMLButtonElement
+> & {
+    label: string
+}
+
+const Button = ({label, ...props}: ButtonProps) => {
+    return (
+        <button {...props} className={styles.button}>{label}</button>
+    )
+}
+
+export default Button

src/components/Timer/Timer.module.css

@@ -0,0 +1,55 @@
+.timer_container {
+    display: flex;
+    flex-direction: column;
+    background-color: #FFFFFF;
+    border-radius: 16px;
+    gap: 10px;
+    padding: 10px;
+}
+
+.top_buttons {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+}
+
+.minute_buttons {
+    display: flex;
+    flex-direction: row;
+    gap: 10px;
+}
+
+.clock {
+    width: 256px;
+    height: 256px;
+    display: flex;
+    color: #000000;
+    align-items: center;
+    justify-content: center;
+    padding: 10px;
+    border-radius: 50%;
+    border-color: #DCC3F8;
+    border-width: 8px;
+    border-style: solid;
+}
+
+.clock_text {
+    font-family: 'Montserrat';
+    font-weight: bold;
+    font-size: 40px;
+}
+
+.clock_text:hover {
+    cursor: pointer;
+}
+
+.clock_text:active {
+    transform: translateY(4px);
+}
+
+.presets_buttons {
+    display: flex;
+    flex-direction: row;
+    gap: 10px;
+    justify-content: center;
+}

src/components/Timer/Timer.tsx

@@ -0,0 +1,51 @@
+import { useEffect, useState } from 'react';
+import TimeManager from '../../helpers/TimeManager';
+import Button from '../Button/Button';
+import styles from './Timer.module.css'
+
+const Timer = () => {
+    const [timeManager, recreateTimeManager] = useState(() => new TimeManager(0))
+    const [remainingTime, setRemainingTime] = useState({ minutes: 0, seconds: 0 });
+
+    useEffect(() => {
+        timeManager.start()
+        console.log("timer started")
+        const interval = setInterval(() => {
+            setRemainingTime(timeManager.getRemainingTime())
+        }, 100);
+        
+        return () => {
+            clearInterval(interval);
+            timeManager.stop();
+        }
+    }, [timeManager])
+
+    const handlePause = () => timeManager.togglePause();
+    const handleAdd = () => timeManager.addTime(1);
+    const handleSubstract = () => timeManager.subtractTime(1);
+    const handleRecreation = (minutes: number) => recreateTimeManager(new TimeManager(minutes))
+
+    return (
+        <div className={styles.timer_container}>
+            <div className={styles.top_buttons}>
+                <div className={styles.minute_buttons}>
+                    <Button label='-1' onClick={handleSubstract}/>
+                    <Button label='+1' onClick={handleAdd}/>
+                </div>
+                <Button label='X'/>
+            </div>
+            <div className={styles.clock}>
+                <a onClick={handlePause} className={styles.clock_text}>{remainingTime.minutes}:{remainingTime.seconds < 10 ? '0' : ''}{remainingTime.seconds}</a>
+            </div>
+            <div className={styles.presets_buttons}>
+                <Button label='15' onClick={() => handleRecreation(15)}/>
+                <Button label='30' onClick={() => handleRecreation(30)}/>
+                <Button label='60' onClick={() => handleRecreation(60)}/>
+                <Button label='90' onClick={() => handleRecreation(90)}/>
+                <Button label='120' onClick={() => handleRecreation(120)}/>
+            </div>
+        </div>
+    )
+}
+
+export default Timer;