website refactor

apps/website/components/leagues/WalletSummaryPanel.tsx

@@ -0,0 +1,128 @@
+'use client';
+
+import React from 'react';
+import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
+import { Surface } from '@/ui/Surface';
+import { Icon } from '@/ui/Icon';
+import { Button } from '@/ui/Button';
+import { Wallet, ArrowUpRight, ArrowDownLeft, History } from 'lucide-react';
+
+interface Transaction {
+  id: string;
+  type: 'credit' | 'debit';
+  amount: number;
+  description: string;
+  date: string;
+}
+
+interface WalletSummaryPanelProps {
+  balance: number;
+  currency: string;
+  transactions: Transaction[];
+  onDeposit: () => void;
+  onWithdraw: () => void;
+}
+
+export function WalletSummaryPanel({ balance, currency, transactions, onDeposit, onWithdraw }: WalletSummaryPanelProps) {
+  return (
+    <Stack gap={6}>
+      <Surface variant="dark" border rounded="lg" padding={8} position="relative" overflow="hidden">
+        {/* Background Pattern */}
+        <Box 
+          position="absolute" 
+          top="-5rem" 
+          right="-5rem" 
+          w="12rem" 
+          h="12rem" 
+          bg="bg-primary-blue/5" 
+          rounded="full" 
+          blur="xl"
+          pointerEvents="none"
+        />
+
+        <Stack direction={{ base: 'col', md: 'row' }} justify="between" align="center" gap={8}>
+          <Stack gap={2}>
+            <Stack direction="row" align="center" gap={2}>
+              <Icon icon={Wallet} size={4} color="text-gray-500" />
+              <Text size="xs" color="text-gray-500" weight="bold" letterSpacing="widest">AVAILABLE BALANCE</Text>
+            </Stack>
+            <Stack direction="row" align="baseline" gap={2}>
+              <Text size="4xl" weight="bold" color="text-white">
+                {balance.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
+              </Text>
+              <Text size="xl" weight="medium" color="text-gray-500">{currency}</Text>
+            </Stack>
+          </Stack>
+
+          <Stack direction="row" gap={3}>
+            <Button variant="primary" onClick={onDeposit}>
+              <Stack direction="row" align="center" gap={2}>
+                <Icon icon={ArrowDownLeft} size={4} />
+                <Text>Deposit</Text>
+              </Stack>
+            </Button>
+            <Button variant="secondary" onClick={onWithdraw}>
+              <Stack direction="row" align="center" gap={2}>
+                <Icon icon={ArrowUpRight} size={4} />
+                <Text>Withdraw</Text>
+              </Stack>
+            </Button>
+          </Stack>
+        </Stack>
+      </Surface>
+
+      <Surface variant="dark" border rounded="lg" overflow="hidden">
+        <Box px={6} py={4} borderBottom borderColor="border-charcoal-outline" bg="bg-iron-gray/20">
+          <Stack direction="row" align="center" gap={2}>
+            <Icon icon={History} size={4} color="text-primary-blue" />
+            <Text weight="bold" letterSpacing="wider" size="sm" display="block">
+              RECENT TRANSACTIONS
+            </Text>
+          </Stack>
+        </Box>
+
+        <Stack gap={0}>
+          {transactions.length === 0 ? (
+            <Box py={12} center>
+              <Text color="text-gray-500">No recent transactions.</Text>
+            </Box>
+          ) : (
+            transactions.map((tx) => (
+              <Box key={tx.id} p={4} borderBottom borderColor="border-charcoal-outline" hoverBg="bg-white/5" transition>
+                <Stack direction="row" justify="between" align="center">
+                  <Stack direction="row" align="center" gap={4}>
+                    <Box 
+                      center 
+                      w={10} 
+                      h={10} 
+                      rounded="full" 
+                      bg={tx.type === 'credit' ? 'bg-performance-green/10' : 'bg-error-red/10'}
+                    >
+                      <Icon 
+                        icon={tx.type === 'credit' ? ArrowDownLeft : ArrowUpRight} 
+                        size={4} 
+                        color={tx.type === 'credit' ? 'text-performance-green' : 'text-error-red'} 
+                      />
+                    </Box>
+                    <Stack gap={0.5}>
+                      <Text weight="medium" color="text-white">{tx.description}</Text>
+                      <Text size="xs" color="text-gray-500">{new Date(tx.date).toLocaleDateString()}</Text>
+                    </Stack>
+                  </Stack>
+                  <Text 
+                    weight="bold" 
+                    color={tx.type === 'credit' ? 'text-performance-green' : 'text-white'}
+                  >
+                    {tx.type === 'credit' ? '+' : '-'}{tx.amount.toFixed(2)}
+                  </Text>
+                </Stack>
+              </Box>
+            ))
+          )}
+        </Stack>
+      </Surface>
+    </Stack>
+  );
+}