refactor files

src/features/settings/components/DailyGoalCard.tsx

@@ -0,0 +1,56 @@
+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>
+  )
+}