feat: implement time setting

src/components/about/about.module.css

@@ -1,4 +1,6 @@
 .about {
+  padding-top: 10px;
+
   & .effect {
     position: sticky;
     top: 0;

src/components/modal/modal.module.css

@@ -1,7 +1,7 @@
 .overlay {
   position: fixed;
   inset: 0;
-  z-index: 19;
+  z-index: 20;
   background-color: rgb(9 9 11 / 40%);
   backdrop-filter: blur(5px);
 }

src/components/toolbox/pomodoro/button/button.module.css

@@ -4,7 +4,7 @@
   justify-content: center;
   width: 30px;
   height: 30px;
-  font-size: var(--font-xsm);
+  font-size: var(--font-sm);
   color: var(--color-foreground);
   cursor: pointer;
   background-color: var(--color-neutral-100);
@@ -16,4 +16,8 @@
   &:hover {
     background-color: var(--color-neutral-200);
   }
+
+  &.smallIcon {
+    font-size: var(--font-xsm);
+  }
 }

src/components/toolbox/pomodoro/button/button.tsx

@@ -1,17 +1,23 @@
 import { Tooltip } from '@/components/tooltip';
 
+import { cn } from '@/helpers/styles';
+
 import styles from './button.module.css';
 
 interface ButtonProps {
   icon: React.ReactElement;
   onClick: () => void;
+  smallIcon?: boolean;
   tooltip: string;
 }
 
-export function Button({ icon, onClick, tooltip }: ButtonProps) {
+export function Button({ icon, onClick, smallIcon, tooltip }: ButtonProps) {
   return (
     <Tooltip content={tooltip} hideDelay={0} placement="bottom" showDelay={0}>
-      <button className={styles.button} onClick={onClick}>
+      <button
+        className={cn(styles.button, smallIcon && styles.smallIcon)}
+        onClick={onClick}
+      >
         {icon}
       </button>
     </Tooltip>

src/components/toolbox/pomodoro/pomodoro.module.css

@@ -1,3 +1,22 @@
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 8px;
+
+  & .title {
+    font-size: var(--font-sm);
+    font-weight: 500;
+    color: var(--color-foreground-subtle);
+  }
+
+  & .buttons {
+    display: flex;
+    column-gap: 4px;
+    align-items: center;
+  }
+}
+
 .control {
   display: flex;
   align-items: center;

src/components/toolbox/pomodoro/pomodoro.tsx

@@ -1,10 +1,12 @@
 import { useState, useEffect, useRef, useMemo } from 'react';
 import { FaUndo, FaPlay, FaPause } from 'react-icons/fa/index';
+import { IoMdSettings } from 'react-icons/io/index';
 
 import { Modal } from '@/components/modal';
 import { Tabs } from './tabs';
 import { Timer } from './timer';
 import { Button } from './button';
+import { Setting } from './setting';
 
 import styles from './pomodoro.module.css';
 
@@ -14,11 +16,25 @@ interface PomodoroProps {
 }
 
 export function Pomodoro({ onClose, show }: PomodoroProps) {
+  const [showSetting, setShowSetting] = useState(false);
+
   const [selectedTab, setSelectedTab] = useState('pomodoro');
   const [running, setRunning] = useState(false);
-  const [timer, setTimer] = useState(10);
+  const [timer, setTimer] = useState(0);
   const interval = useRef<ReturnType<typeof setInterval> | null>(null);
 
+  const [times, setTimes] = useState<Record<string, number>>({
+    long: 60,
+    pomodoro: 60,
+    short: 60,
+  });
+
+  const [completions, setCompletions] = useState<Record<string, number>>({
+    long: 0,
+    pomodoro: 0,
+    short: 0,
+  });
+
   const tabs = useMemo(
     () => [
       { id: 'pomodoro', label: 'Pomodoro', time: 60 },
@@ -45,22 +61,26 @@ export function Pomodoro({ onClose, show }: PomodoroProps) {
       if (interval.current) clearInterval(interval.current);
 
       setRunning(false);
+      setCompletions(prev => ({
+        ...prev,
+        [selectedTab]: prev[selectedTab] + 1,
+      }));
     }
-  }, [timer]);
+  }, [timer, selectedTab]);
 
   useEffect(() => {
-    const time = tabs.find(tab => tab.id === selectedTab)?.time || 10;
+    const time = times[selectedTab] || 10;
 
     if (interval.current) clearInterval(interval.current);
 
     setRunning(false);
     setTimer(time);
-  }, [selectedTab, tabs]);
+  }, [selectedTab, times]);
 
   const toggleRunning = () => {
     if (running) setRunning(false);
     else if (timer <= 0) {
-      const time = tabs.find(tab => tab.id === selectedTab)?.time || 10;
+      const time = times[selectedTab] || 10;
 
       setTimer(time);
       setRunning(true);
@@ -70,29 +90,60 @@ export function Pomodoro({ onClose, show }: PomodoroProps) {
   const restart = () => {
     if (interval.current) clearInterval(interval.current);
 
-    const time = tabs.find(tab => tab.id === selectedTab)?.time || 10;
+    const time = times[selectedTab] || 10;
 
     setRunning(false);
     setTimer(time);
   };
 
   return (
+    <>
       <Modal show={show} onClose={onClose}>
-      <h1>Pomodoro Timer</h1>
+        <header className={styles.header}>
+          <h2 className={styles.title}>Pomodoro Timer</h2>
+
+          <div className={styles.button}>
+            <Button
+              icon={<IoMdSettings />}
+              tooltip="Change Times"
+              onClick={() => setShowSetting(true)}
+            />
+          </div>
+        </header>
+
         <Tabs selectedTab={selectedTab} tabs={tabs} onSelect={setSelectedTab} />
         <Timer timer={timer} />
 
         <div className={styles.control}>
-        <p className={styles.completed}>0 completed</p>
+          <p className={styles.completed}>
+            {completions[selectedTab] || 0} completed
+          </p>
           <div className={styles.buttons}>
-          <Button icon={<FaUndo />} tooltip="Restart" onClick={restart} />
+            <Button
+              icon={<FaUndo />}
+              smallIcon
+              tooltip="Restart"
+              onClick={restart}
+            />
             <Button
               icon={running ? <FaPause /> : <FaPlay />}
+              smallIcon
               tooltip={running ? 'Pause' : 'Start'}
               onClick={toggleRunning}
             />
           </div>
         </div>
       </Modal>
+
+      <Setting
+        show={showSetting}
+        times={times}
+        onClose={() => setShowSetting(false)}
+        onChange={times => {
+          setShowSetting(false);
+          setTimes(times);
+        }}
+      />
+    </>
   );
 }

src/components/toolbox/pomodoro/setting/index.ts

@@ -0,0 +1 @@
+export { Setting } from './setting';

src/components/toolbox/pomodoro/setting/setting.module.css

@@ -0,0 +1,66 @@
+.title {
+  margin-bottom: 16px;
+  font-family: var(--font-heading);
+  font-size: var(--font-md);
+  font-weight: 600;
+}
+
+& .form {
+  display: flex;
+  flex-direction: column;
+
+  & .field {
+    display: flex;
+    flex-direction: column;
+    row-gap: 8px;
+    margin-bottom: 16px;
+
+    & .label {
+      font-size: var(--font-sm);
+      color: var(--color-foreground);
+
+      & span {
+        color: var(--color-foreground-subtle);
+      }
+    }
+
+    & .input {
+      display: block;
+      height: 40px;
+      padding: 0 8px;
+      color: var(--color-foreground);
+      background-color: var(--color-neutral-50);
+      border: 1px solid var(--color-neutral-200);
+      border-radius: 4px;
+      outline: none;
+    }
+  }
+
+  & .buttons {
+    display: flex;
+    column-gap: 8px;
+    align-items: center;
+    justify-content: flex-end;
+
+    & button {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 40px;
+      padding: 0 16px;
+      font-size: var(--font-sm);
+      font-weight: 500;
+      color: var(--color-foreground);
+      cursor: pointer;
+      background-color: var(--color-neutral-200);
+      border: none;
+      border-radius: 4px;
+      outline: none;
+
+      &.primary {
+        color: var(--color-neutral-100);
+        background-color: var(--color-neutral-950);
+      }
+    }
+  }
+}

src/components/toolbox/pomodoro/setting/setting.tsx

@@ -0,0 +1,92 @@
+import { useEffect, useState } from 'react';
+
+import { Modal } from '@/components/modal';
+
+import styles from './setting.module.css';
+
+interface SettingProps {
+  onChange: (newTimes: Record<string, number>) => void;
+  onClose: () => void;
+  show: boolean;
+  times: Record<string, number>;
+}
+
+export function Setting({ onChange, onClose, show, times }: SettingProps) {
+  const [values, setValues] = useState(times);
+
+  useEffect(() => setValues(times), [times]);
+
+  const handleChange = (id: string) => (value: number) => {
+    setValues(prev => ({ ...prev, [id]: value * 60 }));
+  };
+
+  const handleSubmit = e => {
+    e.preventDefault();
+
+    onChange(values);
+  };
+
+  return (
+    <Modal show={show} onClose={onClose}>
+      <h2 className={styles.title}>Change Times</h2>
+
+      <form className={styles.form} onSubmit={handleSubmit}>
+        <Field
+          id="pomodoro"
+          label="Pomodoro"
+          value={values.pomodoro / 60}
+          onChange={handleChange('pomodoro')}
+        />
+        <Field
+          id="short"
+          label="Short Break"
+          value={values.short / 60}
+          onChange={handleChange('short')}
+        />
+        <Field
+          id="long"
+          label="Long Break"
+          value={values.long / 60}
+          onChange={handleChange('long')}
+        />
+
+        <div className={styles.buttons}>
+          <button
+            onClick={e => {
+              e.preventDefault();
+              onClose();
+            }}
+          >
+            Cancel
+          </button>
+          <button className={styles.primary}>Save</button>
+        </div>
+      </form>
+    </Modal>
+  );
+}
+
+interface FieldProps {
+  id: string;
+  label: string;
+  onChange: (value: number) => void;
+  value: number;
+}
+
+function Field({ id, label, onChange, value }: FieldProps) {
+  return (
+    <div className={styles.field}>
+      <label className={styles.label} htmlFor={id}>
+        {label} <span>(minutes)</span>
+      </label>
+      <input
+        className={styles.input}
+        max={120}
+        min={1}
+        type="number"
+        value={value}
+        onChange={e => onChange(Number(e.target.value))}
+      />
+    </div>
+  );
+}

src/components/toolbox/pomodoro/tabs/tabs.module.css

@@ -28,7 +28,7 @@
       border-color: var(--color-neutral-300);
     }
 
-    &:hover {
+    &:not(.selected):hover {
       color: var(--color-foreground);
       background-color: var(--color-neutral-100);
     }