69 lines
2.5 KiB
TypeScript
69 lines
2.5 KiB
TypeScript
import { useXuTransactions } from '@/hooks/use-gamification'
|
|
import { useGamification } from '@/hooks/use-gamification'
|
|
import type { XuTransactionType } from '@/types'
|
|
|
|
const TX_ICON: Record<XuTransactionType, string> = {
|
|
earn_welcome: 'redeem',
|
|
earn_daily: 'check_circle',
|
|
earn_streak: 'local_fire_department',
|
|
earn_ads: 'play_circle',
|
|
spend_freeze: 'ac_unit',
|
|
spend_writing: 'auto_fix_high',
|
|
spend_test: 'quiz',
|
|
}
|
|
|
|
export function XuWalletCard() {
|
|
const { data: gam } = useGamification()
|
|
const { data: txs, isLoading } = useXuTransactions(5)
|
|
|
|
const balance = gam?.xu ?? 0
|
|
|
|
return (
|
|
<section className="col-span-12 md:col-span-4 bg-blue-600 text-white rounded-xl p-6 relative overflow-hidden flex flex-col justify-between shadow-sm">
|
|
{/* Decorative blobs */}
|
|
<div className="absolute -right-6 -top-6 w-28 h-28 bg-white/10 rounded-full blur-3xl pointer-events-none" />
|
|
<div className="absolute -left-6 -bottom-6 w-28 h-28 bg-blue-400/30 rounded-full blur-3xl pointer-events-none" />
|
|
|
|
<div className="relative z-10">
|
|
<p className="text-xs font-bold uppercase tracking-widest opacity-70 mb-1">Ví Xu của bạn</p>
|
|
<div className="text-4xl font-extrabold tracking-tight">
|
|
{balance.toLocaleString('vi-VN')} Xu
|
|
</div>
|
|
</div>
|
|
|
|
<div className="relative z-10 mt-5 space-y-2.5">
|
|
{isLoading && (
|
|
<>
|
|
{[1, 2].map((i) => (
|
|
<div key={i} className="h-10 bg-white/10 rounded-lg animate-pulse" />
|
|
))}
|
|
</>
|
|
)}
|
|
|
|
{!isLoading && txs && txs.length === 0 && (
|
|
<div className="bg-white/10 rounded-lg px-3 py-2.5 text-xs opacity-70 text-center">
|
|
Chưa có giao dịch nào
|
|
</div>
|
|
)}
|
|
|
|
{!isLoading && txs && txs.map((t) => (
|
|
<div
|
|
key={t.id}
|
|
className="bg-white/10 backdrop-blur-md rounded-lg px-3 py-2.5 flex items-center justify-between text-xs"
|
|
>
|
|
<div className="flex items-center gap-2">
|
|
<span className="material-symbols-outlined" style={{ fontSize: 16 }}>
|
|
{TX_ICON[t.type] ?? 'swap_horiz'}
|
|
</span>
|
|
<span className="truncate max-w-[120px]">{t.description ?? t.type}</span>
|
|
</div>
|
|
<span className={`font-bold ${t.amount > 0 ? 'text-green-300' : 'text-red-300'}`}>
|
|
{t.amount > 0 ? `+${t.amount}` : t.amount} Xu
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|