38 lines
1.1 KiB
TypeScript
38 lines
1.1 KiB
TypeScript
import type { FC } from "react";
|
|
import { bindIconAnimation } from "@/shared/lib";
|
|
import type { BankOperation } from "../api/queries";
|
|
|
|
import { bankOperationAppearance } from "../model/operation-appearance";
|
|
import classes from "./BankOperationIcon.module.css";
|
|
|
|
type BankOperationIconProps = {
|
|
kind: BankOperation["kind"];
|
|
categoryName?: string | null;
|
|
};
|
|
const BankOperationIcon: FC<BankOperationIconProps> = (props) => {
|
|
const icon = bankOperationAppearance(props.kind, props.categoryName);
|
|
return (
|
|
<svg
|
|
ref={bindIconAnimation}
|
|
className={`${classes.icon} ${icon.animation ? classes[icon.animation] : ""}`}
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="1.6"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
aria-hidden="true"
|
|
focusable="false"
|
|
style={{ flexShrink: 0, color: `var(--mantine-color-${icon.color}-7)` }}
|
|
>
|
|
{icon.path.split(" M").map((part, index) => (
|
|
<path key={part} d={index ? `M${part}` : part} pathLength={1} />
|
|
))}
|
|
</svg>
|
|
);
|
|
};
|
|
|
|
export { BankOperationIcon };
|