Mohammadali
b0ce5ce2f9
feat(wallet): enhance wallet UI and transaction item display fix(profile): update profile detail card to handle loading and error states style: improve UI consistency across profile and wallet components
49 lines
No EOL
1.4 KiB
TypeScript
49 lines
No EOL
1.4 KiB
TypeScript
import React from 'react';
|
||
import { ArrowDownIcon, ArrowUp } 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-success' : 'text-error';
|
||
const bgColor = isDeposit ? 'bg-success/10' : 'bg-error/10';
|
||
const iconColor = isDeposit ? 'text-success' : 'text-error';
|
||
|
||
return (
|
||
<div
|
||
className={`
|
||
flex items-center justify-between w-full py-3
|
||
${!isLast ? 'border-b border-border' : ''}
|
||
`}
|
||
>
|
||
<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; |