refactor: colocate frontend component files

src/pages/account/ui/AccountPage/components/RecentOperations.view.tsx

@@ -0,0 +1,51 @@
+import { Alert, Button, Skeleton, Stack, Text } from "@mantine/core";
+import { LoadingSkeleton } from "@wealthledger/ui";
+import type { FC } from "react";
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router";
+import { LedgerEntryRow } from "@/entities/broker-operation";
+import type { AccountPageRecentOperations } from "../AccountPage.vm";
+
+type RecentOperationsProps = {
+	operations: AccountPageRecentOperations;
+};
+
+const RecentOperations: FC<RecentOperationsProps> = (props) => {
+	const { operations } = props;
+	const { t } = useTranslation();
+
+	return (
+		<Stack gap="sm">
+			{operations.state === "loading" ? (
+				<LoadingSkeleton label={t("ledger.recentLoading")}>
+					{[0, 1, 2].map((index) => (
+						<Skeleton key={index} height={48} radius="sm" />
+					))}
+				</LoadingSkeleton>
+			) : null}
+			{operations.state === "error" ? (
+				<Alert color="red">{t("ledger.recentError")}</Alert>
+			) : null}
+			{operations.state === "empty" ? (
+				<Text c="dimmed">{t("ledger.recentEmpty")}</Text>
+			) : null}
+			{operations.state === "loaded"
+				? operations.items.map((operation) => (
+						<LedgerEntryRow
+							key={JSON.stringify([
+								operation.account?.id,
+								operation.id,
+								operation.logoName,
+							])}
+							operation={operation}
+						/>
+					))
+				: null}
+			<Button component={Link} to={operations.to} variant="subtle">
+				{t("ledger.open")}
+			</Button>
+		</Stack>
+	);
+};
+
+export { RecentOperations };