diff --git a/src/components/menu/item/item.module.css b/src/components/menu/item/item.module.css
index d8479e7..781bf96 100644
--- a/src/components/menu/item/item.module.css
+++ b/src/components/menu/item/item.module.css
@@ -33,4 +33,11 @@
& .icon {
color: var(--color-foreground);
}
+
+ & .active {
+ width: 4px;
+ height: 4px;
+ background: var(--color-neutral-950);
+ border-radius: 50%;
+ }
}
diff --git a/src/components/menu/item/item.tsx b/src/components/menu/item/item.tsx
index e401693..ee64463 100644
--- a/src/components/menu/item/item.tsx
+++ b/src/components/menu/item/item.tsx
@@ -1,6 +1,7 @@
import styles from './item.module.css';
interface ItemProps {
+ active?: boolean;
disabled?: boolean;
href?: string;
icon: React.ReactElement;
@@ -9,6 +10,7 @@ interface ItemProps {
}
export function Item({
+ active,
disabled = false,
href,
icon,
@@ -25,6 +27,7 @@ export function Item({
{...(href ? { href, target: '_blank' } : {})}
>
{icon} {label}
+ {active &&
}
);
}
diff --git a/src/components/menu/items/notepad.tsx b/src/components/menu/items/notepad.tsx
index df68e09..0a4dcff 100644
--- a/src/components/menu/items/notepad.tsx
+++ b/src/components/menu/items/notepad.tsx
@@ -2,10 +2,21 @@ import { MdNotes } from 'react-icons/md/index';
import { Item } from '../item';
+import { useNoteStore } from '@/store';
+
interface NotepadProps {
open: () => void;
}
export function Notepad({ open }: NotepadProps) {
- return } label="Notepad" onClick={open} />;
+ const note = useNoteStore(state => state.note);
+
+ return (
+ }
+ label="Notepad"
+ onClick={open}
+ />
+ );
}
diff --git a/src/components/menu/items/pomodoro.tsx b/src/components/menu/items/pomodoro.tsx
index 812d2a4..5a8e094 100644
--- a/src/components/menu/items/pomodoro.tsx
+++ b/src/components/menu/items/pomodoro.tsx
@@ -2,10 +2,21 @@ import { MdOutlineAvTimer } from 'react-icons/md/index';
import { Item } from '../item';
+import { usePomodoroStore } from '@/store';
+
interface PomodoroProps {
open: () => void;
}
export function Pomodoro({ open }: PomodoroProps) {
- return } label="Pomodoro" onClick={open} />;
+ const running = usePomodoroStore(state => state.running);
+
+ return (
+ }
+ label="Pomodoro"
+ onClick={open}
+ />
+ );
}
diff --git a/src/components/toolbox/pomodoro/pomodoro.tsx b/src/components/toolbox/pomodoro/pomodoro.tsx
index e0488ac..1024fbe 100644
--- a/src/components/toolbox/pomodoro/pomodoro.tsx
+++ b/src/components/toolbox/pomodoro/pomodoro.tsx
@@ -9,6 +9,7 @@ import { Button } from './button';
import { Setting } from './setting';
import { useLocalStorage } from '@/hooks/use-local-storage';
+import { usePomodoroStore } from '@/store';
import styles from './pomodoro.module.css';
@@ -21,7 +22,10 @@ export function Pomodoro({ onClose, show }: PomodoroProps) {
const [showSetting, setShowSetting] = useState(false);
const [selectedTab, setSelectedTab] = useState('pomodoro');
- const [running, setRunning] = useState(false);
+
+ const running = usePomodoroStore(state => state.running);
+ const setRunning = usePomodoroStore(state => state.setRunning);
+
const [timer, setTimer] = useState(0);
const interval = useRef | null>(null);
@@ -76,7 +80,7 @@ export function Pomodoro({ onClose, show }: PomodoroProps) {
[selectedTab]: prev[selectedTab] + 1,
}));
}
- }, [timer, selectedTab, running]);
+ }, [timer, selectedTab, running, setRunning]);
useEffect(() => {
const time = times[selectedTab] || 10;
@@ -85,7 +89,7 @@ export function Pomodoro({ onClose, show }: PomodoroProps) {
setRunning(false);
setTimer(time);
- }, [selectedTab, times]);
+ }, [selectedTab, times, setRunning]);
const toggleRunning = () => {
if (running) setRunning(false);
diff --git a/src/store/index.ts b/src/store/index.ts
index 0f7826f..180ffae 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -1,3 +1,4 @@
export { useSoundStore } from './sound';
export { useLoadingStore } from './loading';
export { useNoteStore } from './note';
+export { usePomodoroStore } from './pomodoro';
diff --git a/src/store/pomodoro/index.ts b/src/store/pomodoro/index.ts
new file mode 100644
index 0000000..d717db5
--- /dev/null
+++ b/src/store/pomodoro/index.ts
@@ -0,0 +1,13 @@
+import { create } from 'zustand';
+
+interface PomodoroStore {
+ running: boolean;
+ setRunning: (value: boolean) => void;
+}
+
+export const usePomodoroStore = create()(set => ({
+ running: false,
+ setRunning(value: boolean) {
+ set({ running: value });
+ },
+}));