Builds page breadcrumbs

app/routes/builds.tsx

@@ -0,0 +1,61 @@
+import { type LinksFunction } from "@remix-run/node";
+import { Link, Outlet, useMatches, useParams } from "@remix-run/react";
+import type * as React from "react";
+import { useTranslation } from "react-i18next";
+import { Main } from "~/components/Main";
+import type { MainWeaponId } from "~/modules/in-game-lists";
+
+import styles from "~/styles/builds.css";
+import { atOrError } from "~/utils/arrays";
+import { BUILDS_PAGE } from "~/utils/urls";
+
+export const links: LinksFunction = () => {
+  return [{ rel: "stylesheet", href: styles }];
+};
+
+export const handle = {
+  i18n: "weapons",
+};
+
+export default function BuildsLayoutPage() {
+  const matches = useMatches();
+  const { t } = useTranslation(["weapons", "common"]);
+  const params = useParams();
+
+  const weaponId: MainWeaponId | undefined = atOrError(matches, -1).data?.[
+    "weaponId"
+  ];
+
+  return (
+    <Main className="stack lg">
+      <nav className="builds__breadcrumbs">
+        <SometimesLink isLink={Boolean(params["slug"])}>
+          {t("common:pages.builds")}
+        </SometimesLink>
+        {typeof weaponId === "number" && (
+          <>
+            <div>/</div>
+            <SometimesLink isLink={false}>
+              {t(`weapons:MAIN_${weaponId}`)}
+            </SometimesLink>
+          </>
+        )}
+      </nav>
+      <Outlet />
+    </Main>
+  );
+}
+
+function SometimesLink({
+  children,
+  isLink,
+}: {
+  children: React.ReactNode;
+  isLink: boolean;
+}) {
+  if (isLink) {
+    return <Link to={BUILDS_PAGE}>{children}</Link>;
+  }
+
+  return <div>{children}</div>;
+}

app/routes/builds/$slug.tsx

@@ -1,5 +1,4 @@
 import { type LoaderArgs } from "@remix-run/node";
-import { Main } from "~/components/Main";
 import { i18next } from "~/modules/i18n";
 import { mainWeaponIds, weaponIdIsNotAlt } from "~/modules/in-game-lists";
 import { mySlugify } from "~/utils/urls";
@@ -14,9 +13,9 @@ export const loader = async ({ request, params }: LoaderArgs) => {
     throw new Response(null, { status: 404 });
   }
 
-  return null;
+  return { weaponId };
 };
 
 export default function WeaponsBuildsPage() {
-  return <Main>Hellou</Main>;
+  return <div>Hellou</div>;
 }

app/routes/builds/index.tsx

@@ -1,22 +1,16 @@
-import { type LinksFunction } from "@remix-run/node";
 import { Link } from "@remix-run/react";
 import { useTranslation } from "react-i18next";
 import { Image } from "~/components/Image";
-import { Main } from "~/components/Main";
 import type { MainWeaponId } from "~/modules/in-game-lists";
 import { weaponCategories, weaponIdIsNotAlt } from "~/modules/in-game-lists";
-import styles from "~/styles/builds.css";
 import { mainWeaponImageUrl, mySlugify, weaponCategoryUrl } from "~/utils/urls";
 
-export const links: LinksFunction = () => {
-  return [{ rel: "stylesheet", href: styles }];
-};
-
 export const handle = {
   i18n: "weapons",
 };
 
 // xxx: 2) breadcrumbs + link to new build
+// xxx: 3) titles
 
 export default function BuildsPage() {
   const { t } = useTranslation(["common", "weapons"]);
@@ -26,7 +20,7 @@ export default function BuildsPage() {
   };
 
   return (
-    <Main className="stack md">
+    <div className="stack md">
       {weaponCategories.map((category) => (
         <div key={category.name} className="builds__category">
           <div className="builds__category__header">
@@ -63,6 +57,6 @@ export default function BuildsPage() {
           </div>
         </div>
       ))}
-    </Main>
+    </div>
   );
 }

app/styles/builds.css

@@ -1,3 +1,10 @@
+.builds__breadcrumbs {
+  display: flex;
+  font-size: var(--fonts-xs);
+  font-weight: var(--bold);
+  gap: var(--s-1);
+}
+
 .builds__category {
   display: flex;
   flex-direction: column;

app/utils/urls.ts

@@ -25,6 +25,7 @@ export const ADMIN_PAGE = "/admin";
 export const FAQ_PAGE = "/faq";
 export const CONTRIBUTIONS_PAGE = "/contributions";
 export const BADGES_PAGE = "/badges";
+export const BUILDS_PAGE = "/builds";
 export const ANALYZER_PAGE = "/analyzer";
 export const CALENDAR_PAGE = "/calendar";
 export const STOP_IMPERSONATING_URL = "/auth/impersonate/stop";