feat: add pomodoro timer tool

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;
+  }
 }

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}

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,8 +114,7 @@ export function Pomodoro({ onClose, open, show }: PomodoroProps) {
   };
 
   return (
-    <>
-      <Modal show={show} onClose={onClose}>
+    <Container tight>
       <header className={styles.header}>
         <h2 className={styles.title}>Pomodoro Timer</h2>
 
@@ -130,7 +123,6 @@ export function Pomodoro({ onClose, open, show }: PomodoroProps) {
             icon={<IoMdSettings />}
             tooltip="Change Times"
             onClick={() => {
-                onClose();
               setShowSetting(true);
             }}
           />
@@ -138,7 +130,7 @@ export function Pomodoro({ onClose, open, show }: PomodoroProps) {
       </header>
 
       <Tabs selectedTab={selectedTab} tabs={tabs} onSelect={setSelectedTab} />
-        <Timer timer={timer} />
+      <Timer tall timer={timer} />
 
       <div className={styles.control}>
         <p className={styles.completed}>
@@ -159,7 +151,6 @@ export function Pomodoro({ onClose, open, show }: PomodoroProps) {
           />
         </div>
       </div>
-      </Modal>
 
       <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>
   );
 }

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>