102 lines
3.5 KiB
TypeScript
102 lines
3.5 KiB
TypeScript
import { useState } from 'react'
|
|
import { cn } from '@/lib/utils'
|
|
|
|
interface NotifPrefs {
|
|
daily: boolean
|
|
streak: boolean
|
|
weekly: boolean
|
|
leaderboard: boolean
|
|
}
|
|
|
|
const STORAGE_KEY = 'settings_notifications'
|
|
const TIME_KEY = 'settings_notif_time'
|
|
|
|
const DEFAULT_PREFS: NotifPrefs = { daily: true, streak: true, weekly: false, leaderboard: true }
|
|
|
|
function loadPrefs(): NotifPrefs {
|
|
try {
|
|
return { ...DEFAULT_PREFS, ...JSON.parse(localStorage.getItem(STORAGE_KEY) ?? '{}') }
|
|
} catch {
|
|
return DEFAULT_PREFS
|
|
}
|
|
}
|
|
|
|
interface ToggleProps {
|
|
checked: boolean
|
|
onChange: (v: boolean) => void
|
|
}
|
|
|
|
function Toggle({ checked, onChange }: ToggleProps) {
|
|
return (
|
|
<button
|
|
role="switch"
|
|
aria-checked={checked}
|
|
onClick={() => onChange(!checked)}
|
|
className={cn(
|
|
'relative w-11 h-6 rounded-full transition-colors flex-shrink-0',
|
|
checked ? 'bg-blue-600' : 'bg-slate-200',
|
|
)}
|
|
>
|
|
<span className={cn(
|
|
'absolute top-0.5 w-5 h-5 bg-white rounded-full shadow transition-transform',
|
|
checked ? 'translate-x-5' : 'translate-x-0.5',
|
|
)} />
|
|
</button>
|
|
)
|
|
}
|
|
|
|
export function NotificationsCard() {
|
|
const [prefs, setPrefs] = useState<NotifPrefs>(loadPrefs)
|
|
const [time, setTime] = useState(() => localStorage.getItem(TIME_KEY) ?? '20:00')
|
|
|
|
function toggle(key: keyof NotifPrefs) {
|
|
const next = { ...prefs, [key]: !prefs[key] }
|
|
setPrefs(next)
|
|
localStorage.setItem(STORAGE_KEY, JSON.stringify(next))
|
|
}
|
|
|
|
function saveTime(v: string) {
|
|
setTime(v)
|
|
localStorage.setItem(TIME_KEY, v)
|
|
}
|
|
|
|
const items: { key: keyof NotifPrefs; label: string; desc: string }[] = [
|
|
{ key: 'daily', label: 'Nhắc nhở hàng ngày', desc: 'Tùy chỉnh thời gian học mỗi ngày' },
|
|
{ key: 'streak', label: 'Cảnh báo chuỗi học tập', desc: 'Không bao giờ bỏ lỡ Streak của bạn' },
|
|
{ key: 'weekly', label: 'Nhắc nhở mục tiêu tuần', desc: 'Theo dõi tiến độ học tập hàng tuần' },
|
|
{ key: 'leaderboard', label: 'Cập nhật bảng xếp hạng', desc: 'Biết ngay khi ai đó vượt qua bạn' },
|
|
]
|
|
|
|
return (
|
|
<section className="col-span-12 bg-white rounded-xl p-6 shadow-sm">
|
|
<h2 className="text-lg font-bold mb-6 flex items-center gap-2 text-slate-800">
|
|
<span className="material-symbols-outlined text-blue-600" style={{ fontSize: 22 }}>notifications_active</span>
|
|
Cài đặt thông báo
|
|
</h2>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-x-10 gap-y-6">
|
|
{items.map((item) => (
|
|
<div key={item.key} className="flex items-center justify-between gap-4">
|
|
<div>
|
|
<p className="font-semibold text-slate-800 text-sm">{item.label}</p>
|
|
<p className="text-xs text-slate-400 mt-0.5">{item.desc}</p>
|
|
{item.key === 'daily' && prefs.daily && (
|
|
<div className="mt-2 inline-flex items-center gap-1.5 px-2.5 py-1 bg-slate-100 rounded-lg text-xs font-semibold text-slate-600">
|
|
<span className="material-symbols-outlined" style={{ fontSize: 13 }}>schedule</span>
|
|
<input
|
|
type="time"
|
|
value={time}
|
|
onChange={(e) => saveTime(e.target.value)}
|
|
className="bg-transparent outline-none text-xs font-semibold w-16"
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
<Toggle checked={prefs[item.key]} onChange={() => toggle(item.key)} />
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|