website refactor

apps/website/components/leagues/TransactionRow.tsx

@@ -1,91 +1,77 @@
+'use client';
+
 import React from 'react';
-import {
-  ArrowDownLeft,
-  ArrowUpRight,
-  CheckCircle,
-  Clock,
-  CreditCard,
-  DollarSign,
-  TrendingUp,
-  XCircle
-} from 'lucide-react';
+import { ArrowUpRight, ArrowDownRight, DollarSign, TrendingUp, LucideIcon } from 'lucide-react';
+import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
+import { Icon } from '@/ui/Icon';
+import { Surface } from '@/ui/Surface';
 
 interface Transaction {
   id: string;
-  amount: number;
-  type: 'sponsorship' | 'membership' | 'withdrawal' | 'prize';
-  status: 'completed' | 'pending' | 'failed';
+  type: string;
   description: string;
-  reference?: string;
   formattedDate: string;
   formattedAmount: string;
-  fee: number;
+  typeColor: string;
+  status: string;
+  statusColor: string;
+  amountColor: string;
 }
 
 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,
+export function TransactionRow({ transaction }: TransactionRowProps) {
+  const getTransactionIcon = (type: string): LucideIcon => {
+    switch (type) {
+      case 'deposit': return ArrowUpRight;
+      case 'withdrawal': return ArrowDownRight;
+      case 'sponsorship': return DollarSign;
+      case 'prize': return TrendingUp;
+      default: return DollarSign;
+    }
   };
-  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>
+    <Surface
+      variant="muted"
+      rounded="lg"
+      border
+      padding={4}
+      style={{ backgroundColor: 'rgba(38, 38, 38, 0.3)', borderColor: '#262626' }}
+    >
+      <Stack direction="row" align="center" justify="between">
+        <Stack direction="row" align="center" gap={3}>
+          <Box style={{ flexShrink: 0 }}>
+            <Icon icon={getTransactionIcon(transaction.type)} size={4} color={transaction.typeColor} />
+          </Box>
+          <Box style={{ minWidth: 0, flex: 1 }}>
+            <Text size="sm" weight="medium" color="text-white" block truncate>
+              {transaction.description}
+            </Text>
+            <Stack direction="row" align="center" gap={2} mt={1}>
+              <Text size="xs" color="text-gray-500">{transaction.formattedDate}</Text>
+              <Text size="xs" color="text-gray-500">•</Text>
+              <Text size="xs" style={{ color: transaction.typeColor, textTransform: 'capitalize' }}>
+                {transaction.type}
+              </Text>
+              <Text size="xs" color="text-gray-500">•</Text>
+              <Text size="xs" style={{ color: transaction.statusColor, textTransform: 'capitalize' }}>
+                {transaction.status}
+              </Text>
+            </Stack>
+          </Box>
+        </Stack>
+
+        <Box style={{ textAlign: 'right' }}>
+          <Text size="lg" weight="semibold" style={{ color: transaction.amountColor }}>
+            {transaction.formattedAmount}
+          </Text>
+        </Box>
+      </Stack>
+    </Surface>
   );
-}
+}