91 lines
2.9 KiB
TypeScript
91 lines
2.9 KiB
TypeScript
import React from 'react';
|
|
import {
|
|
ArrowDownLeft,
|
|
ArrowUpRight,
|
|
CheckCircle,
|
|
Clock,
|
|
CreditCard,
|
|
DollarSign,
|
|
TrendingUp,
|
|
XCircle
|
|
} from 'lucide-react';
|
|
|
|
interface Transaction {
|
|
id: string;
|
|
amount: number;
|
|
type: 'sponsorship' | 'membership' | 'withdrawal' | 'prize';
|
|
status: 'completed' | 'pending' | 'failed';
|
|
description: string;
|
|
reference?: string;
|
|
formattedDate: string;
|
|
formattedAmount: string;
|
|
fee: number;
|
|
}
|
|
|
|
interface TransactionRowProps {
|
|
transaction: Transaction;
|
|
}
|
|
|
|
export default function TransactionRow({ transaction }: TransactionRowProps) {
|
|
const isIncoming = transaction.amount > 0;
|
|
|
|
const typeIcons = {
|
|
sponsorship: DollarSign,
|
|
membership: CreditCard,
|
|
withdrawal: ArrowUpRight,
|
|
prize: TrendingUp,
|
|
};
|
|
const TypeIcon = typeIcons[transaction.type];
|
|
|
|
const statusConfig = {
|
|
completed: { color: 'text-performance-green', bg: 'bg-performance-green/10', icon: CheckCircle },
|
|
pending: { color: 'text-warning-amber', bg: 'bg-warning-amber/10', icon: Clock },
|
|
failed: { color: 'text-racing-red', bg: 'bg-racing-red/10', icon: XCircle },
|
|
};
|
|
const status = statusConfig[transaction.status];
|
|
const StatusIcon = status.icon;
|
|
|
|
return (
|
|
<div className="flex items-center justify-between p-4 border-b border-charcoal-outline last:border-b-0 hover:bg-iron-gray/30 transition-colors">
|
|
<div className="flex items-center gap-4">
|
|
<div className={`flex h-10 w-10 items-center justify-center rounded-lg ${isIncoming ? 'bg-performance-green/10' : 'bg-iron-gray/50'}`}>
|
|
{isIncoming ? (
|
|
<ArrowDownLeft className="w-5 h-5 text-performance-green" />
|
|
) : (
|
|
<ArrowUpRight className="w-5 h-5 text-gray-400" />
|
|
)}
|
|
</div>
|
|
<div>
|
|
<div className="flex items-center gap-2">
|
|
<span className="font-medium text-white">{transaction.description}</span>
|
|
<span className={`px-2 py-0.5 rounded text-xs ${status.bg} ${status.color}`}>
|
|
{transaction.status}
|
|
</span>
|
|
</div>
|
|
<div className="flex items-center gap-2 text-xs text-gray-500 mt-1">
|
|
<TypeIcon className="w-3 h-3" />
|
|
<span className="capitalize">{transaction.type}</span>
|
|
{transaction.reference && (
|
|
<>
|
|
<span>•</span>
|
|
<span>{transaction.reference}</span>
|
|
</>
|
|
)}
|
|
<span>•</span>
|
|
<span>{transaction.formattedDate}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="text-right">
|
|
<div className={`font-semibold ${isIncoming ? 'text-performance-green' : 'text-white'}`}>
|
|
{transaction.formattedAmount}
|
|
</div>
|
|
{transaction.fee > 0 && (
|
|
<div className="text-xs text-gray-500">
|
|
Fee: ${transaction.fee.toFixed(2)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
} |