57 lines
2.1 KiB
TypeScript
57 lines
2.1 KiB
TypeScript
import { useState } from 'react'
|
|
import { cn } from '@/lib/utils'
|
|
|
|
const GOAL_OPTIONS = [
|
|
{ value: '10', label: '10p', sublabel: 'Dễ dàng' },
|
|
{ value: '20', label: '20p', sublabel: 'Tiêu chuẩn' },
|
|
{ value: '30', label: '30p', sublabel: 'Thử thách' },
|
|
{ value: '60', label: '1h', sublabel: 'Chuyên sâu' },
|
|
]
|
|
|
|
const XP_MAP: Record<string, number> = { '10': 20, '20': 50, '30': 80, '60': 120 }
|
|
const STORAGE_KEY = 'settings_daily_goal'
|
|
|
|
export function DailyGoalCard() {
|
|
const [goal, setGoal] = useState<string>(() => localStorage.getItem(STORAGE_KEY) ?? '20')
|
|
|
|
function handleSelect(value: string) {
|
|
setGoal(value)
|
|
localStorage.setItem(STORAGE_KEY, value)
|
|
}
|
|
|
|
return (
|
|
<section className="col-span-12 md:col-span-6 bg-white rounded-xl p-6 shadow-sm">
|
|
<h2 className="text-lg font-bold mb-5 flex items-center gap-2 text-slate-800">
|
|
<span className="material-symbols-outlined text-blue-600" style={{ fontSize: 22 }}>target</span>
|
|
Mục tiêu hàng ngày
|
|
</h2>
|
|
|
|
<div className="grid grid-cols-2 gap-3">
|
|
{GOAL_OPTIONS.map((opt) => {
|
|
const active = goal === opt.value
|
|
return (
|
|
<button
|
|
key={opt.value}
|
|
onClick={() => handleSelect(opt.value)}
|
|
className={cn(
|
|
'p-4 rounded-xl border-2 text-center transition-all',
|
|
active
|
|
? 'border-blue-600 bg-blue-50 text-blue-600'
|
|
: 'border-slate-100 bg-slate-50 text-slate-700 hover:border-slate-200',
|
|
)}
|
|
>
|
|
<span className={cn('block text-sm font-bold', active && 'text-blue-600')}>{opt.label}</span>
|
|
<span className={cn('text-xs', active ? 'text-blue-500' : 'text-slate-400')}>{opt.sublabel}</span>
|
|
</button>
|
|
)
|
|
})}
|
|
</div>
|
|
|
|
<div className="mt-5 p-3.5 rounded-xl bg-blue-50 flex items-center justify-center gap-2 text-blue-600 font-bold text-sm">
|
|
<span className="material-symbols-outlined" style={{ fontSize: 18, fontVariationSettings: "'FILL' 1" }}>stars</span>
|
|
+{XP_MAP[goal]} XP mỗi ngày
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|