Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | 3x 7x 7x 2x 2x 2x 1x 7x 7x 3x | import { Badge } from '@/components/badge';
import type { Transaction } from './transaction-table';
import {
TRANSACTION_STATUS,
TRANSACTION_STATUS_TEXT,
} from '@/constants/transaction';
import { memo } from 'react';
type StatusBadgeProps = {
status: Transaction['status'];
};
export const StatusBadge = memo(({ status }: StatusBadgeProps) => {
const getStatusConfig = (status: Transaction['status']) => {
switch (status) {
case TRANSACTION_STATUS.COMPLETED:
return {
className: 'bg-green-100 text-green-800 hover:bg-green-100',
text: TRANSACTION_STATUS_TEXT[TRANSACTION_STATUS.COMPLETED],
};
case TRANSACTION_STATUS.FAILED:
return {
className: 'bg-red-100 text-red-800 hover:bg-red-100',
text: TRANSACTION_STATUS_TEXT[TRANSACTION_STATUS.FAILED],
};
case TRANSACTION_STATUS.IN_PROGRESS:
return {
className: 'bg-purple-100 text-purple-800 hover:bg-purple-100',
text: TRANSACTION_STATUS_TEXT[TRANSACTION_STATUS.IN_PROGRESS],
};
default:
return {
className: 'bg-gray-100 text-default hover:bg-gray-100',
text: status,
};
}
};
const config = getStatusConfig(status);
return <Badge className={config.className}>{config.text}</Badge>;
});
StatusBadge.displayName = 'StatusBadge';
|