55 lines
1.2 KiB
TypeScript
55 lines
1.2 KiB
TypeScript
|
import React from "react";
|
||
|
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||
|
|
import { faLongArrowAltRight } from "@fortawesome/free-solid-svg-icons";
|
||
|
|
|
||
|
|
export enum Direction {
|
||
|
|
IN,
|
||
|
|
OUT,
|
||
|
|
SELF,
|
||
|
|
INTERNAL,
|
||
|
|
}
|
||
|
|
|
||
|
|
type TransactionDirectionProps = {
|
||
|
|
direction?: Direction;
|
||
|
|
};
|
||
|
|
|
||
|
|
const TransactionDirection: React.FC<TransactionDirectionProps> = ({
|
||
|
|
direction,
|
||
|
|
}) => {
|
||
|
|
let bgColor = "bg-green-50";
|
||
|
|
let fgColor = "text-green-500";
|
||
|
|
let msg: string | null = null;
|
||
|
|
|
||
|
|
if (direction === Direction.IN) {
|
||
|
|
msg = "IN";
|
||
|
|
} else if (direction === Direction.OUT) {
|
||
|
|
bgColor = "bg-yellow-100";
|
||
|
|
fgColor = "text-yellow-600";
|
||
|
|
msg = "OUT";
|
||
|
|
} else if (direction === Direction.SELF) {
|
||
|
|
bgColor = "bg-gray-200";
|
||
|
|
fgColor = "text-gray-500";
|
||
|
|
msg = "SELF";
|
||
|
|
} else if (direction === Direction.INTERNAL) {
|
||
|
|
msg = "INT";
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<span
|
||
|
|
className={`${bgColor} ${fgColor} ${
|
||
|
|
direction !== undefined
|
||
|
|
? "px-2 py-1 rounded-lg"
|
||
|
|
: "w-5 h-5 rounded-full flex justify-center items-center"
|
||
|
|
} text-xs font-bold`}
|
||
|
|
>
|
||
|
|
{msg ?? (
|
||
|
|
<span>
|
||
|
|
<FontAwesomeIcon icon={faLongArrowAltRight} />
|
||
|
|
</span>
|
||
|
|
)}
|
||
|
|
</span>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default React.memo(TransactionDirection);
|