feat: flesh out popular tanks

packages/website-ue/src/components/TankCard/index.module.css

@@ -2,7 +2,10 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: var(--space-2);
+  gap: var(--space-4);
+
+  overflow: hidden;
+  min-width: min-content;
 
   .icon-wrapper {
     position: relative;
@@ -20,12 +23,19 @@
     }
 
     .icon {
-      width: 7rem;
-      aspect-ratio: 4 / 3;
+      width: 13rem;
+      height: 8rem;
       position: relative;
 
-      background-size: 150%;
-      background-position: center;
+      background-size: 140%;
+      background-position: 40% center;
     }
   }
+
+  .name {
+    white-space: nowrap;
+    overflow: hidden;
+    max-width: 100%;
+    text-overflow: ellipsis;
+  }
 }

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

@@ -1,8 +1,14 @@
+import { api } from "../../core/api/dynamic";
+import { useAwait } from "../../hooks/useAwait";
+import { useGameStrings } from "../../hooks/useGameStrings";
 import type { PopularTank } from "../../protos/popular_tanks";
 import { Text } from "../Text";
 import styles from "./index.module.css";
 
 export function TankCard({ id }: PopularTank) {
+  const tank = useAwait(() => api.tank(id), `tank-${id}`);
+  const gameStrings = useGameStrings("TankEntity");
+
   return (
     <div className={styles["tank-card"]}>
       <div className={styles["icon-wrapper"]}>
@@ -21,7 +27,7 @@ export function TankCard({ id }: PopularTank) {
         />
       </div>
 
-      <Text className={styles.name}>{id}</Text>
+      <Text className={styles.name}>{gameStrings[tank.tank!.name!.value]}</Text>
     </div>
   );
 }