some work on equipment

packages/i18n/strings/en.json

@@ -200,6 +200,7 @@
   "tanks": {
     "loadout": {
       "modules": "Modules",
+      "equipment": "Equipment",
       "alternative": "Alt"
     },
 

packages/website-ue/src/components/TankopediaLoadout/index.tsx

@@ -26,10 +26,31 @@ export function TankopediaLoadout() {
   return (
     <Section>
       <Modules />
+      <Equipment />
     </Section>
   );
 }
 
+function Equipment() {
+  const strings = useStrings();
+  const tank = useProtagonist();
+  // const equipment = useEquipment(
+  //   tank.tank!.equipment_preset_catalog_id,
+  //   tank.tank!.equipment_price_preset_catalog_id,
+  // );
+
+  return (
+    <div className={styles.section}>
+      <div className={styles.header}>
+        <Heading size="4">{strings.tanks.loadout.equipment}</Heading>
+      </div>
+      preset: {tank.tank!.equipment_preset_catalog_id}
+      <br />
+      price: {tank.tank!.equipment_price_preset_catalog_id}
+    </div>
+  );
+}
+
 function Modules() {
   const strings = useStrings();
   const tank = useProtagonist();

packages/website-ue/src/hooks/useEquipment.ts

@@ -0,0 +1,17 @@
+import { api } from "../api/dynamic";
+import { useAwait } from "./useAwait";
+
+export function useEquipment(presetId: string, priceId: string) {
+  const [, presetName] = presetId.split(".");
+  const [, priceName] = priceId.split(".");
+  const preset = useAwait(
+    () => api.equipmentPreset(presetId),
+    `equipment-preset-${presetName}`,
+  );
+  const price = useAwait(
+    () => api.equipmentPricePreset(priceId),
+    `equipment-price-${priceName}`,
+  );
+
+  return { preset, price };
+}