From bee391acfecdaf36488c48ef1022b16a83059d58 Mon Sep 17 00:00:00 2001
From: MAZE <remvze@proton.me>
Date: Fri, 30 Aug 2024 22:21:23 +0330
Subject: [PATCH] feat: add pomodoro timer tool

---
 src/components/timer/timer.module.css      |  4 +
 src/components/timer/timer.tsx             |  6 +-
 src/components/tools/pomodoro/pomodoro.tsx | 87 ++++++++++------------
 src/pages/tools/pomodoro.astro             | 21 ++++++
 4 files changed, 67 insertions(+), 51 deletions(-)
 create mode 100644 src/pages/tools/pomodoro.astro

diff --git a/src/components/timer/timer.module.css b/src/components/timer/timer.module.css
index f1e350c..f29ed66 100644
--- a/src/components/timer/timer.module.css
+++ b/src/components/timer/timer.module.css
@@ -9,4 +9,8 @@
   background-color: var(--color-neutral-50);
   border: 1px solid var(--color-neutral-200);
   border-radius: 8px;
+
+  &.tall {
+    padding: 60px 0;
+  }
 }
diff --git a/src/components/timer/timer.tsx b/src/components/timer/timer.tsx
index 6d65991..477d098 100644
--- a/src/components/timer/timer.tsx
+++ b/src/components/timer/timer.tsx
@@ -1,13 +1,15 @@
 import { padNumber } from '@/helpers/number';
+import { cn } from '@/helpers/styles';
 
 import styles from './timer.module.css';
 
 interface TimerProps {
   displayHours?: boolean;
+  tall?: boolean;
   timer: number;
 }
 
-export function Timer({ displayHours = false, timer }: TimerProps) {
+export function Timer({ displayHours = false, tall, timer }: TimerProps) {
   let hours = Math.floor(timer / 3600);
   let minutes = Math.floor((timer % 3600) / 60);
   let seconds = timer % 60;
@@ -21,7 +23,7 @@ export function Timer({ displayHours = false, timer }: TimerProps) {
   const formattedSeconds = padNumber(seconds);
 
   return (
-    <div className={styles.timer}>
+    <div className={cn(styles.timer, tall && styles.tall)}>
       {displayHours ? (
         <>
           {formattedHours}:{formattedMinutes}:{formattedSeconds}
diff --git a/src/components/tools/pomodoro/pomodoro.tsx b/src/components/tools/pomodoro/pomodoro.tsx
index 3f612d6..83f8354 100644
--- a/src/components/tools/pomodoro/pomodoro.tsx
+++ b/src/components/tools/pomodoro/pomodoro.tsx
@@ -2,7 +2,6 @@ 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 { Button } from '../generics/button';
 import { Timer } from '@/components/timer';
 import { Tabs } from './tabs';
@@ -14,14 +13,9 @@ import { usePomodoroStore } from '@/stores/pomodoro';
 import { useCloseListener } from '@/hooks/use-close-listener';
 
 import styles from './pomodoro.module.css';
+import { Container } from '@/components/container';
 
-interface PomodoroProps {
-  onClose: () => void;
-  open: () => void;
-  show: boolean;
-}
-
-export function Pomodoro({ onClose, open, show }: PomodoroProps) {
+export function Pomodoro() {
   const [showSetting, setShowSetting] = useState(false);
 
   const [selectedTab, setSelectedTab] = useState('pomodoro');
@@ -120,46 +114,43 @@ export function Pomodoro({ onClose, open, show }: PomodoroProps) {
   };
 
   return (
-    <>
-      <Modal show={show} onClose={onClose}>
-        <header className={styles.header}>
-          <h2 className={styles.title}>Pomodoro Timer</h2>
+    <Container tight>
+      <header className={styles.header}>
+        <h2 className={styles.title}>Pomodoro Timer</h2>
 
-          <div className={styles.button}>
-            <Button
-              icon={<IoMdSettings />}
-              tooltip="Change Times"
-              onClick={() => {
-                onClose();
-                setShowSetting(true);
-              }}
-            />
-          </div>
-        </header>
-
-        <Tabs selectedTab={selectedTab} tabs={tabs} onSelect={setSelectedTab} />
-        <Timer timer={timer} />
-
-        <div className={styles.control}>
-          <p className={styles.completed}>
-            {completions[selectedTab] || 0} completed
-          </p>
-          <div className={styles.buttons}>
-            <Button
-              icon={<FaUndo />}
-              smallIcon
-              tooltip="Restart"
-              onClick={restart}
-            />
-            <Button
-              icon={running ? <FaPause /> : <FaPlay />}
-              smallIcon
-              tooltip={running ? 'Pause' : 'Start'}
-              onClick={toggleRunning}
-            />
-          </div>
+        <div className={styles.button}>
+          <Button
+            icon={<IoMdSettings />}
+            tooltip="Change Times"
+            onClick={() => {
+              setShowSetting(true);
+            }}
+          />
         </div>
-      </Modal>
+      </header>
+
+      <Tabs selectedTab={selectedTab} tabs={tabs} onSelect={setSelectedTab} />
+      <Timer tall timer={timer} />
+
+      <div className={styles.control}>
+        <p className={styles.completed}>
+          {completions[selectedTab] || 0} completed
+        </p>
+        <div className={styles.buttons}>
+          <Button
+            icon={<FaUndo />}
+            smallIcon
+            tooltip="Restart"
+            onClick={restart}
+          />
+          <Button
+            icon={running ? <FaPause /> : <FaPlay />}
+            smallIcon
+            tooltip={running ? 'Pause' : 'Start'}
+            onClick={toggleRunning}
+          />
+        </div>
+      </div>
 
       <Setting
         show={showSetting}
@@ -167,13 +158,11 @@ export function Pomodoro({ onClose, open, show }: PomodoroProps) {
         onChange={times => {
           setShowSetting(false);
           setTimes(times);
-          open();
         }}
         onClose={() => {
           setShowSetting(false);
-          open();
         }}
       />
-    </>
+    </Container>
   );
 }
diff --git a/src/pages/tools/pomodoro.astro b/src/pages/tools/pomodoro.astro
new file mode 100644
index 0000000..72d4cf5
--- /dev/null
+++ b/src/pages/tools/pomodoro.astro
@@ -0,0 +1,21 @@
+---
+import Layout from '@/layouts/layout.astro';
+
+import Donate from '@/components/donate.astro';
+import Hero from '@/components/tools/hero.astro';
+import { Pomodoro as PomodoroTimer } from '@/components/tools/pomodoro';
+import Footer from '@/components/footer.astro';
+import About from '@/components/tools/about.astro';
+import Source from '@/components/source.astro';
+---
+
+<Layout title="Pomodoro Timer — Moodist">
+  <Donate />
+  <Hero desc="Super simple Pomodoro timer." title="Pomodoro Timer" />
+  <PomodoroTimer client:load />
+  <About
+    text="Boost your productivity with our simple Pomodoro timer. Designed to help you stay focused, it breaks your work into manageable intervals with regular breaks, making it easier to stay on track and avoid burnout."
+  />
+  <Source />
+  <Footer />
+</Layout>