better topup
This commit is contained in:
parent
b3a3e2b456
commit
b39af77f1f
@ -148,7 +148,8 @@
|
||||
"topUpNote": "Note: This is a development environment. No real payment will be processed.",
|
||||
"processing": "Processing...",
|
||||
"topUpNow": "Top Up Now",
|
||||
"cancel": "Cancel"
|
||||
"cancel": "Cancel",
|
||||
"instantTopUp": "Instant top-up available"
|
||||
},
|
||||
"studio": {
|
||||
"title": "AI Prompt Studio",
|
||||
|
||||
@ -148,7 +148,8 @@
|
||||
"topUpNote": "注意：这是开发环境，不会进行真实的支付处理。",
|
||||
"processing": "处理中...",
|
||||
"topUpNow": "立即充值",
|
||||
"cancel": "取消"
|
||||
"cancel": "取消",
|
||||
"instantTopUp": "支持即时充值"
|
||||
},
|
||||
"studio": {
|
||||
"title": "AI 提示词工作室",
|
||||
|
||||
@ -248,94 +248,92 @@ export default function CreditsPage() {
|
||||
<p className="text-muted-foreground">{t('subtitle')}</p>
|
||||
</div>
|
||||
|
||||
{/* Stats Cards */}
|
||||
{/* Balance and Top-up Section */}
|
||||
{stats && (
|
||||
<div className="space-y-4 mb-8">
|
||||
{/* Balance Card with Top-up Button */}
|
||||
<div className="flex flex-col sm:flex-row gap-4 items-start sm:items-end">
|
||||
<Card className="flex-1 p-6 bg-gradient-to-br from-green-50 to-emerald-50 dark:from-green-950/20 dark:to-emerald-950/20 border-green-200/50 dark:border-green-800/50">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="p-2 rounded-full bg-green-500">
|
||||
<CreditCard className="w-5 h-5 text-white" />
|
||||
<div className="space-y-6 mb-8">
|
||||
{/* Main Balance Card */}
|
||||
<Card className="overflow-hidden">
|
||||
<div className="bg-gradient-to-br from-green-50 via-emerald-50 to-teal-50 dark:from-green-950/30 dark:via-emerald-950/30 dark:to-teal-950/30 p-6 sm:p-8">
|
||||
<div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
|
||||
{/* Balance Display */}
|
||||
<div className="flex items-center space-x-4">
|
||||
<div className="p-3 rounded-full bg-green-500 shadow-lg">
|
||||
<CreditCard className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm font-medium text-green-700 dark:text-green-300">{t('currentBalance')}</p>
|
||||
<p className="text-2xl font-bold text-green-800 dark:text-green-200">
|
||||
<p className="text-sm font-medium text-green-700 dark:text-green-300 mb-1">
|
||||
{t('currentBalance')}
|
||||
</p>
|
||||
<p className="text-3xl sm:text-4xl font-bold text-green-800 dark:text-green-200">
|
||||
${stats.currentBalance.toFixed(2)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Top-up Button */}
|
||||
<div className="flex flex-col items-stretch sm:items-end gap-2 w-full sm:w-auto">
|
||||
<Button
|
||||
onClick={() => setShowTopUpModal(true)}
|
||||
size="lg"
|
||||
className="bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 text-white px-8 py-3 rounded-lg font-semibold shadow-lg hover:shadow-xl transition-all duration-200 transform hover:scale-105"
|
||||
>
|
||||
<Plus className="w-5 h-5 mr-2" />
|
||||
{t('topUp')}
|
||||
</Button>
|
||||
<p className="text-xs text-green-600 dark:text-green-400 text-center sm:text-right">
|
||||
{t('instantTopUp')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Button
|
||||
onClick={() => setShowTopUpModal(true)}
|
||||
className="bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 text-white px-6 py-2 rounded-lg font-semibold shadow-lg hover:shadow-xl transition-all duration-200"
|
||||
>
|
||||
<Plus className="w-4 h-4 mr-2" />
|
||||
{t('topUp')}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Other Stats */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<Card className="p-6">
|
||||
{/* Stats Overview */}
|
||||
<div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<Card className="p-4 sm:p-5 hover:shadow-md transition-shadow duration-200">
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="p-2 rounded-full bg-blue-500">
|
||||
<TrendingUp className="w-5 h-5 text-white" />
|
||||
<div className="p-2 rounded-full bg-blue-500/10 dark:bg-blue-500/20">
|
||||
<TrendingUp className="w-4 h-4 text-blue-500" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm font-medium text-muted-foreground">{t('totalEarned')}</p>
|
||||
<p className="text-xl font-bold text-foreground">${stats.totalEarned.toFixed(2)}</p>
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="text-xs font-medium text-muted-foreground truncate">{t('totalEarned')}</p>
|
||||
<p className="text-lg font-bold text-foreground">${stats.totalEarned.toFixed(2)}</p>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card className="p-6">
|
||||
<Card className="p-4 sm:p-5 hover:shadow-md transition-shadow duration-200">
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="p-2 rounded-full bg-blue-500">
|
||||
<TrendingUp className="w-5 h-5 text-white" />
|
||||
<div className="p-2 rounded-full bg-red-500/10 dark:bg-red-500/20">
|
||||
<TrendingDown className="w-4 h-4 text-red-500" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm font-medium text-muted-foreground">{t('totalEarned')}</p>
|
||||
<p className="text-xl font-bold text-foreground">${stats.totalEarned.toFixed(2)}</p>
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="text-xs font-medium text-muted-foreground truncate">{t('totalSpent')}</p>
|
||||
<p className="text-lg font-bold text-foreground">${stats.totalSpent.toFixed(2)}</p>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card className="p-6">
|
||||
<Card className="p-4 sm:p-5 hover:shadow-md transition-shadow duration-200">
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="p-2 rounded-full bg-red-500">
|
||||
<TrendingDown className="w-5 h-5 text-white" />
|
||||
<div className="p-2 rounded-full bg-emerald-500/10 dark:bg-emerald-500/20">
|
||||
<Calendar className="w-4 h-4 text-emerald-500" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm font-medium text-muted-foreground">{t('totalSpent')}</p>
|
||||
<p className="text-xl font-bold text-foreground">${stats.totalSpent.toFixed(2)}</p>
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="text-xs font-medium text-muted-foreground truncate">{t('thisMonthEarned')}</p>
|
||||
<p className="text-lg font-bold text-foreground">${stats.thisMonthEarned.toFixed(2)}</p>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card className="p-6">
|
||||
<Card className="p-4 sm:p-5 hover:shadow-md transition-shadow duration-200">
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="p-2 rounded-full bg-emerald-500">
|
||||
<Calendar className="w-5 h-5 text-white" />
|
||||
<div className="p-2 rounded-full bg-orange-500/10 dark:bg-orange-500/20">
|
||||
<Calendar className="w-4 h-4 text-orange-500" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm font-medium text-muted-foreground">{t('thisMonthEarned')}</p>
|
||||
<p className="text-xl font-bold text-foreground">${stats.thisMonthEarned.toFixed(2)}</p>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card className="p-6">
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="p-2 rounded-full bg-orange-500">
|
||||
<Calendar className="w-5 h-5 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm font-medium text-muted-foreground">{t('thisMonthSpent')}</p>
|
||||
<p className="text-xl font-bold text-foreground">${stats.thisMonthSpent.toFixed(2)}</p>
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="text-xs font-medium text-muted-foreground truncate">{t('thisMonthSpent')}</p>
|
||||
<p className="text-lg font-bold text-foreground">${stats.thisMonthSpent.toFixed(2)}</p>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user