refactor: colocate frontend component files

src/pages/accounts/ui/AccountsPage/components/AccountsRefreshState.view.tsx

@@ -0,0 +1,39 @@
+import { Alert, Button, Group, Loader, Stack, Text } from "@mantine/core";
+import type { FC } from "react";
+import { useTranslation } from "react-i18next";
+
+type AccountsRefreshStateProps = {
+	refreshing?: boolean;
+	refreshError?: boolean;
+	retry?: () => void;
+};
+
+const AccountsRefreshState: FC<AccountsRefreshStateProps> = (props) => {
+	const { refreshing = false, refreshError = false, retry } = props;
+	const { t } = useTranslation();
+	if (!refreshing && !refreshError) return null;
+	return (
+		<>
+			{refreshing ? (
+				<Group gap="xs" role="status" aria-label={t("accounts.refreshing")}>
+					<Loader size="sm" />
+					<Text c="dimmed" size="sm">
+						{t("accounts.refreshing")}
+					</Text>
+				</Group>
+			) : null}
+			{refreshError ? (
+				<Alert color="orange">
+					<Stack gap="sm">
+						<Text>{t("accounts.refreshError")}</Text>
+						<Button onClick={retry} variant="light">
+							{t("accounts.retry")}
+						</Button>
+					</Stack>
+				</Alert>
+			) : null}
+		</>
+	);
+};
+
+export { AccountsRefreshState, type AccountsRefreshStateProps };