48 lines
No EOL
1.6 KiB
TypeScript
48 lines
No EOL
1.6 KiB
TypeScript
import React from 'react';
|
||
import { ArrowDownCircle, ArrowDownIcon, ArrowUp, ArrowUpCircle } from 'lucide-react';
|
||
import { formatPriceWithToman } from '@/lib/utils/priceUtils';
|
||
|
||
interface TransactionItemProps {
|
||
amount: number;
|
||
description: string;
|
||
type: 'deposit' | 'withdraw';
|
||
isLast?: boolean;
|
||
}
|
||
|
||
const TransactionItem = ({
|
||
amount,
|
||
description,
|
||
type,
|
||
isLast = false,
|
||
}: TransactionItemProps) => {
|
||
const isDeposit = type === 'deposit';
|
||
const Icon = isDeposit ? ArrowDownIcon : ArrowUp;
|
||
const amountColor = isDeposit ? 'text-[#2E7D32]' : 'text-[#D32F2F]';
|
||
const bgColor = isDeposit ? 'bg-[#2E7D3210]' : 'bg-[#D32F2F10]';
|
||
const iconColor = isDeposit ? 'text-[#2E7D32]' : 'text-[#D32F2F]';
|
||
|
||
return (
|
||
<div
|
||
className={`
|
||
flex items-center justify-between w-full py-3
|
||
${!isLast ? 'border-b border-gray-200' : ''}
|
||
`}
|
||
>
|
||
<div className="flex items-center">
|
||
<div className={`p-2 rounded-full ${bgColor}`}>
|
||
<Icon className={`w-5 h-5 rotate-45 ${iconColor}`} />
|
||
</div>
|
||
<span className="text-sm font-normal flex mr-4">{description}</span>
|
||
</div>
|
||
|
||
<div className="flex flex-col items-end gap-1">
|
||
<span className={`text-sm font-medium ${amountColor}`}>
|
||
{isDeposit ? '+' : '-'} {formatPriceWithToman(amount)}
|
||
</span>
|
||
<span className="text-sm text-gray-500">۱۴۰۳/۰۸/۲۴</span>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default TransactionItem; |