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({