refactor: colocate frontend component files

src/app/ui/AppBreadcrumbs/BreadcrumbTrail.tsx

@@ -0,0 +1,36 @@
+import { Breadcrumbs } from "@mantine/core";
+import type { FC } from "react";
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router";
+import classes from "./AppBreadcrumbs.module.css";
+
+type Crumb = { label: string; to?: string };
+type BreadcrumbTrailProps = { items: Crumb[] };
+
+const BreadcrumbTrail: FC<BreadcrumbTrailProps> = (props) => {
+	const { items } = props;
+	const { t } = useTranslation();
+	return (
+		<Breadcrumbs
+			aria-label={t("breadcrumbs.label")}
+			className={classes.trail}
+			component="nav"
+			data-depth={items.length}
+			separator={<span aria-hidden="true">→</span>}
+		>
+			{items.map((item) =>
+				item.to ? (
+					<Link className={classes.link} key={item.to} to={item.to}>
+						{item.label}
+					</Link>
+				) : (
+					<span aria-current="page" key={item.label}>
+						{item.label}
+					</span>
+				),
+			)}
+		</Breadcrumbs>
+	);
+};
+
+export { BreadcrumbTrail };