Builds page Add build button

app/routes/builds.tsx

@@ -2,24 +2,27 @@ 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 { LinkButton } from "~/components/Button";
 import { Main } from "~/components/Main";
+import { useUser } from "~/modules/auth";
 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";
+import { BUILDS_PAGE, userNewBuildPage } from "~/utils/urls";
 
 export const links: LinksFunction = () => {
   return [{ rel: "stylesheet", href: styles }];
 };
 
 export const handle = {
-  i18n: "weapons",
+  i18n: ["weapons", "builds"],
 };
 
 export default function BuildsLayoutPage() {
+  const user = useUser();
   const matches = useMatches();
-  const { t } = useTranslation(["weapons", "common"]);
+  const { t } = useTranslation(["weapons", "common", "builds"]);
   const params = useParams();
 
   const weaponId: MainWeaponId | undefined = atOrError(matches, -1).data?.[
@@ -28,19 +31,26 @@ export default function BuildsLayoutPage() {
 
   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>
-          </>
+      <div className="builds__top-container">
+        <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>
+        {user && (
+          <LinkButton to={userNewBuildPage(user.discordId)} tiny>
+            {t("builds:addBuild")}
+          </LinkButton>
         )}
-      </nav>
+      </div>
       <Outlet />
     </Main>
   );

app/styles/builds.css

@@ -1,3 +1,9 @@
+.builds__top-container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
 .builds__breadcrumbs {
   display: flex;
   font-size: var(--fonts-xs);

app/utils/urls.ts

@@ -36,6 +36,8 @@ export const COMMON_PREVIEW_IMAGE = "/img/layout/common-preview.png";
 export const userPage = (discordId: string) => `/u/${discordId}`;
 export const userBuildsPage = (discordId: string) =>
   `${userPage(discordId)}/builds`;
+export const userNewBuildPage = (discordId: string) =>
+  `/u/${discordId}/builds/new`;
 export const impersonateUrl = (idToLogInAs: number) =>
   `/auth/impersonate?id=${idToLogInAs}`;
 export const badgePage = (badgeId: number) => `${BADGES_PAGE}/${badgeId}`;