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