diff --git a/components/NumaTimer.tsx b/components/NumaTimer.tsx index e38ddd5..7d72b57 100644 --- a/components/NumaTimer.tsx +++ b/components/NumaTimer.tsx @@ -1,4 +1,4 @@ -import { useCallback } from "react" +import { useCallback, useRef } from "react" import { DOMAIN_LABEL, @@ -6,6 +6,7 @@ import { type DomainKey, type NumaTimerUiState } from "~lib/config" +import { pickReminderMessage } from "~lib/messages" import { useTimer } from "~hooks/useTimer" import type { DeepPartial } from "~lib/deepMerge" @@ -40,6 +41,7 @@ const DOMAIN_THEME: Record< } } + export const NumaTimer = ({ domain, uiState, @@ -54,6 +56,7 @@ export const NumaTimer = ({ const { displaySeconds } = useTimer(domain) const theme = DOMAIN_THEME[domain] const isCollapsed = uiState.collapsed[domain] + const reminderMessageRef = useRef(pickReminderMessage()) const handleToggleCollapsed = useCallback(() => { void setUiState((prev) => ({ @@ -160,7 +163,7 @@ export const NumaTimer = ({ fontSize: "14px", color: theme.subText }}> - この時間はもう戻りません + {reminderMessageRef.current} )} diff --git a/lib/messages.ts b/lib/messages.ts new file mode 100644 index 0000000..65bb541 --- /dev/null +++ b/lib/messages.ts @@ -0,0 +1,10 @@ +const REMINDER_MESSAGES = [ + "この時間はもう戻りません", + "今日の時間は有限です", + "いまの使い方で未来が決まる", + "今この瞬間も、過去に変わっています", + "一度きりの今日を大切に", +] as const + +export const pickReminderMessage = () => + REMINDER_MESSAGES[Math.floor(Math.random() * REMINDER_MESSAGES.length)]