refactor: colocate frontend component files

src/entities/bank-card/ui/BankOperationIcon/BankOperationIcon.tsx

@@ -0,0 +1,37 @@
+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 };