129 lines
4.7 KiB
TypeScript
129 lines
4.7 KiB
TypeScript
'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>
|
|
);
|
|
}
|