refactor files

src/features/settings/components/Settings.tsx

@@ -0,0 +1,49 @@
+import { useAuthStore } from '@/store/auth-store'
+import { useAuthModalStore } from '@/store/auth-modal-store'
+import { ProfileCard } from './ProfileCard'
+import { XuWalletCard } from './XuWalletCard'
+import { DailyGoalCard } from './DailyGoalCard'
+import { ExamDateCard } from './ExamDateCard'
+import { NotificationsCard } from './NotificationsCard'
+import { AccountCard } from './AccountCard'
+
+export function Settings() {
+  const user = useAuthStore((s) => s.user)
+  const openModal = useAuthModalStore((s) => s.open)
+
+  if (!user) {
+    return (
+      <div className="px-4 lg:px-6 py-12 max-w-6xl mx-auto flex flex-col items-center justify-center gap-4 text-center">
+        <span className="material-symbols-outlined text-slate-300" style={{ fontSize: 64 }}>settings</span>
+        <h1 className="text-xl font-bold text-slate-700">Cài đặt</h1>
+        <p className="text-slate-400 text-sm max-w-xs">
+          Đăng nhập để cá nhân hoá mục tiêu học tập, cài đặt thông báo và quản lý tài khoản.
+        </p>
+        <button
+          onClick={() => openModal('login')}
+          className="mt-2 px-6 py-2.5 bg-blue-600 text-white rounded-full font-bold text-sm hover:bg-blue-700 transition-colors"
+        >
+          Đăng nhập
+        </button>
+      </div>
+    )
+  }
+
+  return (
+    <div className="px-4 lg:px-6 py-6 max-w-5xl mx-auto">
+      <div className="mb-6">
+        <h1 className="text-2xl font-extrabold text-slate-800 mb-1">Cài đặt</h1>
+        <p className="text-slate-400 text-sm">Quản lý hồ sơ, mục tiêu học tập và thông báo.</p>
+      </div>
+
+      <div className="grid grid-cols-12 gap-5">
+        <ProfileCard />
+        <XuWalletCard />
+        <DailyGoalCard />
+        <ExamDateCard />
+        <NotificationsCard />
+        <AccountCard />
+      </div>
+    </div>
+  )
+}