refactor: colocate frontend component files

src/pages/account-income/ui/AccountIncomePage/components/IncomePayments.view.tsx

@@ -0,0 +1,27 @@
+import { Stack, Title } from "@mantine/core";
+import type { FC } from "react";
+import { useTranslation } from "react-i18next";
+import { LedgerEntryRow } from "@/entities/broker-operation";
+import classes from "../AccountIncomePage.module.css";
+import type { AccountIncomePageViewModel } from "../AccountIncomePage.vm";
+
+type LoadedProps = Extract<AccountIncomePageViewModel, { state: "loaded" }>;
+type IncomePaymentsProps = { entries: LoadedProps["display"]["entries"] };
+
+const IncomePayments: FC<IncomePaymentsProps> = (props) => {
+	const { t } = useTranslation();
+	return (
+		<Stack component="section" aria-label={t("income.payments")}>
+			<Title order={2}>{t("income.payments")}</Title>
+			<Stack component="ul" gap="sm" className={classes.entries}>
+				{props.entries.map(({ key, operation }) => (
+					<li key={key}>
+						<LedgerEntryRow operation={operation} />
+					</li>
+				))}
+			</Stack>
+		</Stack>
+	);
+};
+
+export { IncomePayments };