extract components from website

apps/website/app/leagues/[id]/wallet/page.tsx

@@ -4,6 +4,7 @@ import { useState, useEffect } from 'react';
 import { useParams } from 'next/navigation';
 import Card from '@/components/ui/Card';
 import Button from '@/components/ui/Button';
+import TransactionRow from '@/components/leagues/TransactionRow';
 import { useServices } from '@/lib/services/ServiceProvider';
 import { LeagueWalletViewModel } from '@/lib/view-models/LeagueWalletViewModel';
 import {
@@ -21,69 +22,6 @@ import {
   Calendar
 } from 'lucide-react';
 
-function TransactionRow({ transaction }: { transaction: any }) {
-  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>
-  );
-}
 
 export default function LeagueWalletPage() {
   const params = useParams();