130 lines
4.7 KiB
TypeScript
130 lines
4.7 KiB
TypeScript
'use client';
|
|
|
|
import { Button } from '@/ui/Button';
|
|
import { Icon } from '@/ui/Icon';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { Surface } from '@/ui/Surface';
|
|
import { Text } from '@/ui/Text';
|
|
import { ArrowDownLeft, ArrowUpRight, History, Wallet } from 'lucide-react';
|
|
|
|
interface Transaction {
|
|
id: string;
|
|
type: 'deposit' | 'withdrawal' | 'sponsorship' | 'prize';
|
|
formattedAmount: string;
|
|
description: string;
|
|
formattedDate: string;
|
|
}
|
|
|
|
interface WalletSummaryPanelProps {
|
|
formattedBalance: string;
|
|
currency: string;
|
|
transactions: Transaction[];
|
|
onDeposit: () => void;
|
|
onWithdraw: () => void;
|
|
}
|
|
|
|
export function WalletSummaryPanel({ formattedBalance, currency, transactions, onDeposit, onWithdraw }: WalletSummaryPanelProps) {
|
|
return (
|
|
<Stack gap={6}>
|
|
<Surface variant="dark" border rounded="lg" padding={8} position="relative" overflow="hidden">
|
|
{/* Background Pattern */}
|
|
<Stack
|
|
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">
|
|
{formattedBalance}
|
|
</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">
|
|
<Stack 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>
|
|
</Stack>
|
|
|
|
<Stack gap={0}>
|
|
{transactions.length === 0 ? (
|
|
<Stack py={12} center>
|
|
<Text color="text-gray-500">No recent transactions.</Text>
|
|
</Stack>
|
|
) : (
|
|
transactions.map((tx) => {
|
|
const isCredit = tx.type === 'deposit' || tx.type === 'sponsorship';
|
|
return (
|
|
<Stack 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}>
|
|
<Stack
|
|
center
|
|
w={10}
|
|
h={10}
|
|
rounded="full"
|
|
bg={isCredit ? 'bg-performance-green/10' : 'bg-error-red/10'}
|
|
>
|
|
<Icon
|
|
icon={isCredit ? ArrowDownLeft : ArrowUpRight}
|
|
size={4}
|
|
color={isCredit ? 'text-performance-green' : 'text-error-red'}
|
|
/>
|
|
</Stack>
|
|
<Stack gap={0.5}>
|
|
<Text weight="medium" color="text-white">{tx.description}</Text>
|
|
<Text size="xs" color="text-gray-500">{tx.formattedDate}</Text>
|
|
</Stack>
|
|
</Stack>
|
|
<Text
|
|
weight="bold"
|
|
color={isCredit ? 'text-performance-green' : 'text-white'}
|
|
>
|
|
{tx.formattedAmount}
|
|
</Text>
|
|
</Stack>
|
|
</Stack>
|
|
);
|
|
})
|
|
)}
|
|
</Stack>
|
|
</Surface>
|
|
</Stack>
|
|
);
|
|
}
|