47 lines
1.7 KiB
TypeScript
47 lines
1.7 KiB
TypeScript
const EARN_ITEMS = [
|
|
{ label: 'Mục tiêu ngày', reward: '+10 xu' },
|
|
{ label: 'Mốc chuỗi (Streak)', reward: '+20 xu' },
|
|
{ label: 'Xem quảng cáo', reward: '+5 xu' },
|
|
]
|
|
|
|
const SPEND_ITEMS = [
|
|
{ label: 'Streak Freeze', cost: '20 xu' },
|
|
{ label: 'AI Writing Feedback', cost: '30 xu' },
|
|
]
|
|
|
|
export function XuEconomyCard() {
|
|
return (
|
|
<div className="lg:col-span-4 bg-white p-6 rounded-xl shadow-sm">
|
|
<h3 className="text-base font-bold text-slate-800 mb-5">Cửa hàng Xu</h3>
|
|
|
|
<div className="space-y-5">
|
|
{/* Earn */}
|
|
<div>
|
|
<span className="text-xs text-green-600 font-bold uppercase tracking-wider block mb-2.5">Kiếm Xu</span>
|
|
<div className="space-y-2">
|
|
{EARN_ITEMS.map((item) => (
|
|
<div key={item.label} className="flex items-center justify-between p-3 bg-slate-50 rounded-lg">
|
|
<span className="text-sm font-medium text-slate-700">{item.label}</span>
|
|
<span className="text-sm font-bold text-amber-600">{item.reward}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Spend */}
|
|
<div>
|
|
<span className="text-xs text-red-500 font-bold uppercase tracking-wider block mb-2.5">Tiêu Xu</span>
|
|
<div className="space-y-2">
|
|
{SPEND_ITEMS.map((item) => (
|
|
<div key={item.label} className="flex items-center justify-between p-3 bg-slate-50 rounded-lg opacity-80">
|
|
<span className="text-sm font-medium text-slate-700">{item.label}</span>
|
|
<span className="text-sm font-bold text-slate-400">{item.cost}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|