Refactor BuildCard to take attributes in one obj

app/components/BuildCard.tsx

@@ -16,41 +16,43 @@ import { FormWithConfirm } from "./FormWithConfirm";
 import { Image } from "./Image";
 import { Popover } from "./Popover";
 
-type BuildProps = Pick<
-  Build,
-  | "id"
-  | "title"
-  | "description"
-  | "clothesGearSplId"
-  | "headGearSplId"
-  | "shoesGearSplId"
-  | "updatedAt"
-  | "modes"
-> & {
-  abilities: BuildAbilitiesTuple;
-  modes: ModeShort[] | null;
-  weapons: Array<BuildWeapon["weaponSplId"]>;
+interface BuildProps {
+  build: Pick<
+    Build,
+    | "id"
+    | "title"
+    | "description"
+    | "clothesGearSplId"
+    | "headGearSplId"
+    | "shoesGearSplId"
+    | "updatedAt"
+  > & {
+    abilities: BuildAbilitiesTuple;
+    modes: ModeShort[] | null;
+    weapons: Array<BuildWeapon["weaponSplId"]>;
+  };
   canEdit?: boolean;
-};
+}
 
-export function BuildCard({
-  id,
-  title,
-  description,
-  weapons,
-  updatedAt,
-  headGearSplId,
-  clothesGearSplId,
-  shoesGearSplId,
-  abilities,
-  modes,
-  canEdit = false,
-}: BuildProps) {
+export function BuildCard({ build, canEdit = false }: BuildProps) {
   const user = useUser();
   const { t } = useTranslation(["weapons", "builds", "common"]);
   const { i18n } = useTranslation();
   const isMounted = useIsMounted();
 
+  const {
+    id,
+    title,
+    description,
+    clothesGearSplId,
+    headGearSplId,
+    shoesGearSplId,
+    updatedAt,
+    abilities,
+    modes,
+    weapons,
+  } = build;
+
   const bottomRowItems = [
     description && (
       <Popover

app/routes/builds/$slug.tsx

@@ -46,20 +46,7 @@ export default function WeaponsBuildsPage() {
   return (
     <div className="builds-container">
       {data.builds.map((build) => (
-        <BuildCard
-          key={build.id}
-          id={build.id}
-          title={build.title}
-          description={build.description}
-          headGearSplId={build.headGearSplId}
-          clothesGearSplId={build.clothesGearSplId}
-          shoesGearSplId={build.shoesGearSplId}
-          modes={build.modes}
-          updatedAt={build.updatedAt}
-          abilities={build.abilities}
-          weapons={build.weapons}
-          canEdit={false}
-        />
+        <BuildCard key={build.id} build={build} canEdit={false} />
       ))}
     </div>
   );

app/routes/u.$identifier/builds/index.tsx

@@ -76,20 +76,7 @@ export default function UserBuildsPage() {
       {data.builds.length > 0 ? (
         <div className="builds-container">
           {data.builds.map((build) => (
-            <BuildCard
-              key={build.id}
-              id={build.id}
-              title={build.title}
-              description={build.description}
-              headGearSplId={build.headGearSplId}
-              clothesGearSplId={build.clothesGearSplId}
-              shoesGearSplId={build.shoesGearSplId}
-              modes={build.modes}
-              updatedAt={build.updatedAt}
-              abilities={build.abilities}
-              weapons={build.weapons}
-              canEdit={isOwnPage}
-            />
+            <BuildCard key={build.id} build={build} canEdit={isOwnPage} />
           ))}
         </div>
       ) : (