diff --git a/apps/web/app/components/Settings.tsx b/apps/web/app/components/Settings.tsx index 0f8184d..7d4d114 100644 --- a/apps/web/app/components/Settings.tsx +++ b/apps/web/app/components/Settings.tsx @@ -1,5 +1,5 @@ import { Card, CardBody, CardHeader } from '@nextui-org/react' -import { type ReminderSetting, type User } from '@synk-cal/core' +import { type ReminderSetting, ReminderTiming, type User } from '@synk-cal/core' import { UserInfo } from '~/components/UserInfo' import { Button, Input, Select, SelectItem } from '@nextui-org/react' @@ -10,21 +10,31 @@ type Props = { user: User reminders: readonly ReminderSetting[] onChange: (reminders: ReminderSetting[]) => void - notifyBeforeOptions?: number[] + minutesBeforeOptions?: number[] + previousDayAtOptions?: { hour: number; minute: number }[] className?: string } const unitInJapanese = { - min: '分', - hour: '時間', - day: '日', + min: '分前', + hour: '時間前', + day: '日前', } as const +const getTimingKey = (reminder: ReminderTiming) => { + if ('minutesBefore' in reminder) { + return String(reminder.minutesBefore) + } else { + return `${String(reminder.hour).padStart(2, '0')}:${String(reminder.minute).padStart(2, '0')}` + } +} + export function ReminderSettings({ user, reminders, onChange, - notifyBeforeOptions = [5, 10, 15, 30, 60, 120, 180, 360, 720, 1440], + minutesBeforeOptions = [5, 10, 15, 30, 60, 120, 180, 360, 720, 1440], + previousDayAtOptions = Array.from({ length: 24 }).map((_, hour) => ({ hour, minute: 0 })), className, }: Props) { const addReminder = () => { @@ -40,15 +50,38 @@ export function ReminderSettings({ onChange(reminders.filter((reminder) => reminder.id !== id)) } - const updateReminder = (id: string | number, minutesBefore: number) => { + const updateReminder = (id: string | number, value: ReminderTiming) => { onChange( - reminders.map((reminder) => - reminder.id === id ? ({ ...reminder, minutesBefore } satisfies ReminderSetting) : reminder, - ), + reminders.map((reminder) => { + if (reminder.id === id) { + // @ts-expect-error + const { minutesBefore, hour, minute, ...rest } = reminder + return { ...rest, ...value } + } + return reminder + }), ) } const locale = useLocale() + const options: { label: string; key: string; value: ReminderTiming }[] = [ + ...minutesBeforeOptions.map((min) => { + const value = { minutesBefore: min } + let label = '' + if (min < 60) { + label = `${min} ${locale === 'ja' ? unitInJapanese.min : 'min'}` + } else if (min < 1440) { + label = `${min / 60} ${locale === 'ja' ? unitInJapanese.hour : 'hour'}` + } else { + label = `${min / 1440} ${locale === 'ja' ? unitInJapanese.day : 'day'}` + } + return { label, key: getTimingKey(value), value } + }), + ...previousDayAtOptions.map((value) => { + const key = getTimingKey(value) + return { label: locale === 'ja' ? `前日の ${key}` : `${key} the day before`, key, value } + }), + ] return (
@@ -76,23 +109,19 @@ export function ReminderSettings({