chore: codify React component style

src/pages/account-events/ui/AccountEventsPage.tsx

@@ -1,4 +1,5 @@
 import { Button, Card, Group, Stack, Text, Title } from "@mantine/core";
+import type { FC } from "react";
 import { useTranslation } from "react-i18next";
 import { useParams } from "react-router";
 import {
@@ -8,7 +9,19 @@ import {
 import { formatMoney } from "@/entities/portfolio";
 import { StateView } from "@/shared/ui";
 
-export function AccountEventsPage() {
+type AccountEventsPageErrorProps = {
+	retry: () => void;
+};
+
+type AccountEventsPageLoadedProps = {
+	events: BrokerageEvent[];
+};
+
+type AccountEventRowProps = {
+	event: BrokerageEvent;
+};
+
+const AccountEventsPage: FC = () => {
 	const { accountId } = useParams();
 	const events = useBrokerageEvents(accountId);
 	if (events.isLoading) return <AccountEventsPageLoading />;
@@ -17,10 +30,11 @@ export function AccountEventsPage() {
 	if (!events.data) return <AccountEventsPageLoading />;
 	if (!events.data.events.length) return <AccountEventsPageEmpty />;
 	return <AccountEventsPageLoaded events={events.data.events} />;
-}
+};
 
-function AccountEventsPageLoading() {
+const AccountEventsPageLoading: FC = () => {
 	const { t } = useTranslation();
+
 	return (
 		<StateView
 			loading
@@ -28,10 +42,12 @@ function AccountEventsPageLoading() {
 			text={t("states.loadingText")}
 		/>
 	);
-}
+};
 
-function AccountEventsPageError({ retry }: { retry: () => void }) {
+const AccountEventsPageError: FC<AccountEventsPageErrorProps> = (props) => {
+	const { retry } = props;
 	const { t } = useTranslation();
+
 	return (
 		<StateView
 			error
@@ -40,10 +56,11 @@ function AccountEventsPageError({ retry }: { retry: () => void }) {
 			action={<Button onClick={retry}>{t("events.retry")}</Button>}
 		/>
 	);
-}
+};
 
-function AccountEventsPageEmpty() {
+const AccountEventsPageEmpty: FC = () => {
 	const { t } = useTranslation();
+
 	return (
 		<Stack maw={960} gap="lg">
 			<Title order={1}>{t("events.title")}</Title>
@@ -51,10 +68,12 @@ function AccountEventsPageEmpty() {
 			<StateView title={t("events.emptyTitle")} text={t("events.emptyText")} />
 		</Stack>
 	);
-}
+};
 
-function AccountEventsPageLoaded({ events }: { events: BrokerageEvent[] }) {
+const AccountEventsPageLoaded: FC<AccountEventsPageLoadedProps> = (props) => {
+	const { events } = props;
 	const { t } = useTranslation();
+
 	return (
 		<Stack maw={960} gap="lg">
 			<Title order={1}>{t("events.title")}</Title>
@@ -67,10 +86,12 @@ function AccountEventsPageLoaded({ events }: { events: BrokerageEvent[] }) {
 			))}
 		</Stack>
 	);
-}
+};
 
-function AccountEventRow({ event }: { event: BrokerageEvent }) {
+const AccountEventRow: FC<AccountEventRowProps> = (props) => {
+	const { event } = props;
 	const { t } = useTranslation();
+
 	return (
 		<Card withBorder>
 			<Group justify="space-between" align="flex-start" wrap="wrap">
@@ -94,7 +115,7 @@ function AccountEventRow({ event }: { event: BrokerageEvent }) {
 			</Group>
 		</Card>
 	);
-}
+};
 
 function formatCalendarDate(date: string) {
 	return new Intl.DateTimeFormat("ru-RU", {
@@ -102,3 +123,5 @@ function formatCalendarDate(date: string) {
 		timeZone: "UTC",
 	}).format(new Date(`${date}T00:00:00Z`));
 }
+
+export { AccountEventsPage };