78 lines
2.5 KiB
TypeScript
78 lines
2.5 KiB
TypeScript
'use client';
|
|
|
|
import React from '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;
|
|
type: string;
|
|
description: string;
|
|
formattedDate: string;
|
|
formattedAmount: string;
|
|
typeColor: string;
|
|
status: string;
|
|
statusColor: string;
|
|
amountColor: string;
|
|
}
|
|
|
|
interface TransactionRowProps {
|
|
transaction: Transaction;
|
|
}
|
|
|
|
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;
|
|
}
|
|
};
|
|
|
|
return (
|
|
<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>
|
|
);
|
|
}
|