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