95 lines
4.4 KiB
TypeScript
95 lines
4.4 KiB
TypeScript
'use client';
|
|
|
|
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
|
|
import { Badge } from '@/components/ui/badge';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Coins, CreditCard, Gift, TrendingUp } from 'lucide-react';
|
|
import { formatRecordTime } from '@/lib/credit-records-store';
|
|
|
|
type CreditRecord = {
|
|
id: string;
|
|
amount: number;
|
|
description: string;
|
|
createdAt: string;
|
|
balanceAfter: number;
|
|
};
|
|
|
|
type CreditsTabProps = {
|
|
creditsBalance: number;
|
|
creditRecords: CreditRecord[];
|
|
};
|
|
|
|
export default function CreditsTab({ creditsBalance, creditRecords }: CreditsTabProps) {
|
|
const profile = { credits_balance: creditsBalance };
|
|
return (
|
|
<div className="space-y-6">
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2"><Coins className="h-5 w-5" />积分中心</CardTitle>
|
|
<CardDescription>管理你的积分余额与充值</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="flex items-center justify-between p-4 rounded-lg bg-primary/5 mb-4">
|
|
<div>
|
|
<p className="text-sm text-muted-foreground">当前余额</p>
|
|
<p className="text-3xl font-bold text-primary">{profile.credits_balance} <span className="text-sm font-normal">积分</span></p>
|
|
</div>
|
|
<Button className="gap-2"><CreditCard className="h-4 w-4" />充值积分</Button>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-3 gap-4 mb-4">
|
|
{[
|
|
{ amount: 50, price: 9.9, bonus: 5 },
|
|
{ amount: 200, price: 29.9, bonus: 30 },
|
|
{ amount: 500, price: 59.9, bonus: 100 },
|
|
].map((pkg) => (
|
|
<Card key={pkg.amount} className="cursor-pointer hover:border-primary/50 transition-colors">
|
|
<CardContent className="p-4 text-center">
|
|
<p className="text-2xl font-bold">{pkg.amount}</p>
|
|
<p className="text-xs text-muted-foreground">积分</p>
|
|
<p className="text-sm font-semibold text-primary mt-2">¥{pkg.price}</p>
|
|
<Badge variant="secondary" className="mt-1">送{pkg.bonus}积分</Badge>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="text-base">积分记录</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="space-y-3">
|
|
{creditRecords.length === 0 ? (
|
|
<div className="text-center py-8 text-muted-foreground">
|
|
<TrendingUp className="h-10 w-10 mx-auto mb-2 opacity-20" />
|
|
<p className="text-sm">暂无积分记录</p>
|
|
</div>
|
|
) : creditRecords.map((tx) => (
|
|
<div key={tx.id} className="flex items-center justify-between py-2 border-b border-border/50 last:border-0">
|
|
<div className="flex items-center gap-3">
|
|
<div className={`p-2 rounded-lg ${tx.amount > 0 ? 'bg-emerald-500/10' : 'bg-rose-500/10'}`}>
|
|
{tx.amount > 0 ? <Gift className="h-4 w-4 text-emerald-500" /> : <TrendingUp className="h-4 w-4 text-rose-500" />}
|
|
</div>
|
|
<div>
|
|
<p className="text-sm font-medium">{tx.description}</p>
|
|
<p className="text-xs text-muted-foreground">{formatRecordTime(tx.createdAt)}</p>
|
|
</div>
|
|
</div>
|
|
<div className="text-right">
|
|
<span className={`font-semibold ${tx.amount > 0 ? 'text-emerald-500' : 'text-rose-500'}`}>
|
|
{tx.amount > 0 ? '+' : ''}{tx.amount}
|
|
</span>
|
|
<p className="text-xs text-muted-foreground">余额 {tx.balanceAfter}</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|