feat: small tank icon

src/app/tools/tankopedia/[id]/components/VersusBar.tsx

@@ -6,7 +6,6 @@ import {
 import {
   Button,
   Card,
-  Checkbox,
   Dialog,
   Flex,
   Heading,
@@ -19,6 +18,7 @@ import { go } from 'fuzzysort';
 import { debounce } from 'lodash';
 import { use, useRef, useState } from 'react';
 import { ModuleButton } from '../../../../../components/ModuleButton';
+import { SmallTankIcon } from '../../../../../components/SmallTankIcon';
 import {
   SHELL_NAMES,
   tankDefinitions,
@@ -53,8 +53,11 @@ export function VersusBar() {
           <Dialog.Root>
             <Dialog.Trigger>
               <Button variant="ghost">
-                {antagonist.tank.name}
-                <CaretRightIcon />
+                <Flex gap="2" align="center">
+                  {antagonist.tank.name}
+                  <SmallTankIcon id={antagonist.tank.id} size={16} />
+                  <CaretRightIcon />
+                </Flex>
               </Button>
             </Dialog.Trigger>
 
@@ -250,11 +253,6 @@ export function VersusBar() {
           </Dialog.Root>
         </Flex>
 
-        <Flex gap="2" align="center">
-          <Checkbox defaultChecked />
-          <Text>Calibrated</Text>
-        </Flex>
-
         <Flex>
           {antagonist.gun.shells.map((shell, index) => {
             return (

src/components/SmallTankIcon.tsx

@@ -0,0 +1,29 @@
+import { asset } from '../core/blitzkrieg/asset';
+
+interface SmallTankIconProps {
+  id: number;
+  size?: number;
+}
+
+const WIDTH = 70;
+const HEIGHT = 24;
+
+export function SmallTankIcon({ id, size = HEIGHT }: SmallTankIconProps) {
+  return (
+    <div
+      style={{
+        height: size,
+        overflow: 'hidden',
+        width: WIDTH * (size / HEIGHT),
+      }}
+    >
+      <img
+        src={asset(`icons/tanks/small/${id}.webp`)}
+        style={{
+          transform: `scale(${(size / HEIGHT) * 100}%)`,
+          transformOrigin: 'top left',
+        }}
+      />
+    </div>
+  );
+}