chore: codify React component style

src/app/ui/AppBreadcrumbs.tsx

@@ -1,11 +1,24 @@
+import type { FC } from "react";
 import { useTranslation } from "react-i18next";
 import { Link, useMatch } from "react-router";
 import { useBrokerageAccounts } from "@/entities/brokerage-account";
 
 type Crumb = { label: string; to?: string };
 
-function BreadcrumbTrail({ items }: { items: Crumb[] }) {
+type BreadcrumbTrailProps = {
+	items: Crumb[];
+};
+
+type AccountBreadcrumbsProps = {
+	accountId: string;
+	events: boolean;
+	operations: boolean;
+};
+
+const BreadcrumbTrail: FC<BreadcrumbTrailProps> = (props) => {
+	const { items } = props;
 	const { t } = useTranslation();
+
 	return (
 		<nav
 			aria-label={t("breadcrumbs.label")}
@@ -33,23 +46,17 @@ function BreadcrumbTrail({ items }: { items: Crumb[] }) {
 			))}
 		</nav>
 	);
-}
+};
 
-function AccountBreadcrumbs({
-	accountId,
-	events,
-	operations,
-}: {
-	accountId: string;
-	events: boolean;
-	operations: boolean;
-}) {
+const AccountBreadcrumbs: FC<AccountBreadcrumbsProps> = (props) => {
+	const { accountId, events, operations } = props;
 	const { data: accounts } = useBrokerageAccounts();
 	const { t } = useTranslation();
 	const accountName =
 		accounts?.find((account) => account.id === accountId)?.name ??
 		t("breadcrumbs.accountFallback");
 	const accountPath = `/accounts/${accountId}`;
+
 	return (
 		<BreadcrumbTrail
 			items={
@@ -72,9 +79,9 @@ function AccountBreadcrumbs({
 			}
 		/>
 	);
-}
+};
 
-export function AppBreadcrumbs() {
+const AppBreadcrumbs: FC = () => {
 	const { t } = useTranslation();
 	const accountOperations = useMatch({
 		path: "/accounts/:accountId/operations",
@@ -117,4 +124,6 @@ export function AppBreadcrumbs() {
 	if (settings)
 		return <BreadcrumbTrail items={[{ label: t("breadcrumbs.settings") }]} />;
 	return null;
-}
+};
+
+export { AppBreadcrumbs };