feat: add basic pomodoro structure

src/components/menu/items/index.ts

@@ -3,3 +3,4 @@ export { Share as ShareItem } from './share';
 export { Donate as DonateItem } from './donate';
 export { Notepad as NotepadItem } from './notepad';
 export { Source as SourceItem } from './source';
+export { Pomodoro as PomodoroItem } from './pomodoro';

src/components/menu/items/pomodoro.tsx

@@ -0,0 +1,11 @@
+import { MdOutlineAvTimer } from 'react-icons/md/index';
+
+import { Item } from '../item';
+
+interface PomodoroProps {
+  open: () => void;
+}
+
+export function Pomodoro({ open }: PomodoroProps) {
+  return <Item icon={<MdOutlineAvTimer />} label="Pomodoro" onClick={open} />;
+}

src/components/menu/menu.tsx

@@ -20,10 +20,11 @@ import {
   DonateItem,
   NotepadItem,
   SourceItem,
+  PomodoroItem,
 } from './items';
 import { Divider } from './divider';
 import { ShareLinkModal } from '@/components/modals/share-link';
-import { Notepad } from '@/components/toolbox';
+import { Notepad, Pomodoro } from '@/components/toolbox';
 
 import styles from './menu.module.css';
 
@@ -32,6 +33,7 @@ export function Menu() {
 
   const [showShareLink, setShowShareLink] = useState(false);
   const [showNotepad, setShowNotepad] = useState(false);
+  const [showPomodoro, setShowPomodoro] = useState(false);
 
   const { context, floatingStyles, refs } = useFloating({
     middleware: [
@@ -88,6 +90,7 @@ export function Menu() {
               <ShuffleItem />
               <Divider />
               <NotepadItem open={() => setShowNotepad(true)} />
+              <PomodoroItem open={() => setShowPomodoro(true)} />
               <Divider />
               <DonateItem />
               <SourceItem />
@@ -102,6 +105,7 @@ export function Menu() {
       />
 
       <Notepad show={showNotepad} onClose={() => setShowNotepad(false)} />
+      <Pomodoro show={showPomodoro} onClose={() => setShowPomodoro(false)} />
     </>
   );
 }

src/components/toolbox/index.ts

@@ -1 +1,2 @@
 export { Notepad } from './notepad';
+export { Pomodoro } from './pomodoro';

src/components/toolbox/pomodoro/index.ts

@@ -0,0 +1 @@
+export { Pomodoro } from './pomodoro';

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

@@ -0,0 +1 @@
+/* TODO */

src/components/toolbox/pomodoro/pomodoro.tsx

@@ -0,0 +1,30 @@
+import { useState } from 'react';
+
+import { Modal } from '@/components/modal';
+import { Tabs } from './tabs';
+import { Timer } from './timer';
+
+// import styles from './pomodoro.module.css';
+
+interface PomodoroProps {
+  onClose: () => void;
+  show: boolean;
+}
+
+export function Pomodoro({ onClose, show }: PomodoroProps) {
+  const [selectedTab, setSelectedTab] = useState('pomodoro');
+
+  const tabs = [
+    { id: 'pomodoro', label: 'Pomodoro' },
+    { id: 'short', label: 'Break' },
+    { id: 'long', label: 'Long Break' },
+  ];
+
+  return (
+    <Modal show={show} onClose={onClose}>
+      <h1>Pomodoro Timer</h1>
+      <Tabs selectedTab={selectedTab} tabs={tabs} onSelect={setSelectedTab} />
+      <Timer />
+    </Modal>
+  );
+}

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

@@ -0,0 +1 @@
+export { Tabs } from './tabs';

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

@@ -0,0 +1,34 @@
+.tabs {
+  display: flex;
+  column-gap: 4px;
+  align-items: center;
+  padding: 4px;
+  margin: 8px 0;
+  background-color: var(--color-neutral-50);
+  border: 1px solid var(--color-neutral-200);
+  border-radius: 8px;
+
+  & .tab {
+    display: flex;
+    flex-grow: 1;
+    align-items: center;
+    justify-content: center;
+    height: 45px;
+    font-size: var(--font-sm);
+    color: var(--color-foreground);
+    cursor: pointer;
+    background-color: transparent;
+    border: 1px solid transparent;
+    border-radius: 4px;
+    transition: 0.2s;
+
+    &.selected {
+      background-color: var(--color-neutral-200);
+      border-color: var(--color-neutral-300);
+    }
+
+    &:hover {
+      background-color: var(--color-neutral-100);
+    }
+  }
+}

src/components/toolbox/pomodoro/tabs/tabs.tsx

@@ -0,0 +1,25 @@
+import { cn } from '@/helpers/styles';
+
+import styles from './tabs.module.css';
+
+interface TabsProps {
+  onSelect: (id: string) => void;
+  selectedTab: string;
+  tabs: Array<{ id: string; label: string }>;
+}
+
+export function Tabs({ onSelect, selectedTab, tabs }: TabsProps) {
+  return (
+    <div className={styles.tabs}>
+      {tabs.map(tab => (
+        <button
+          className={cn(styles.tab, selectedTab === tab.id && styles.selected)}
+          key={tab.id}
+          onClick={() => onSelect(tab.id)}
+        >
+          {tab.label}
+        </button>
+      ))}
+    </div>
+  );
+}

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

@@ -0,0 +1 @@
+export { Timer } from './timer';

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

@@ -0,0 +1,12 @@
+.timer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  padding: 30px 0;
+  font-size: var(--font-xlg);
+  font-weight: 500;
+  background-color: var(--color-neutral-50);
+  border: 1px solid var(--color-neutral-200);
+  border-radius: 8px;
+}

src/components/toolbox/pomodoro/timer/timer.tsx

@@ -0,0 +1,5 @@
+import styles from './timer.module.css';
+
+export function Timer() {
+  return <div className={styles.timer}>25:00</div>;
+}