50 lines
1.8 KiB
TypeScript
50 lines
1.8 KiB
TypeScript
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>
|
|
)
|
|
}
|