79 lines
2.4 KiB
TypeScript
79 lines
2.4 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}
|
|
bg="bg-iron-gray/30"
|
|
borderColor="border-charcoal-outline"
|
|
>
|
|
<Stack direction="row" align="center" justify="between">
|
|
<Stack direction="row" align="center" gap={3}>
|
|
<Box flexShrink={0}>
|
|
<Icon icon={getTransactionIcon(transaction.type)} size={4} color={transaction.typeColor} />
|
|
</Box>
|
|
<Box minWidth="0" flexGrow={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" color={transaction.typeColor} transform="capitalize">
|
|
{transaction.type}
|
|
</Text>
|
|
<Text size="xs" color="text-gray-500">•</Text>
|
|
<Text size="xs" color={transaction.statusColor} transform="capitalize">
|
|
{transaction.status}
|
|
</Text>
|
|
</Stack>
|
|
</Box>
|
|
</Stack>
|
|
|
|
<Box textAlign="right">
|
|
<Text size="lg" weight="semibold" color={transaction.amountColor}>
|
|
{transaction.formattedAmount}
|
|
</Text>
|
|
</Box>
|
|
</Stack>
|
|
</Surface>
|
|
);
|
|
}
|