feat: icons

src/app/tools/tankopedia/components/List/index.tsx

@@ -6,7 +6,12 @@ import { Card, Flex, Inset, Text, TextField } from '@radix-ui/themes';
 import { use, useRef } from 'react';
 import { Search } from 'react-fuzzysort';
 import { tankIcon } from '../../../../../core/blitzkrieg/tankIcon';
-import { tanks } from '../../../../../core/blitzkrieg/tankopedia';
+import {
+  TANK_ICONS,
+  TANK_ICONS_COLLECTOR,
+  TANK_ICONS_PREMIUM,
+  tanks,
+} from '../../../../../core/blitzkrieg/tankopedia';
 import { theme } from '../../../../../stitches.config';
 import * as styles from './index.css';
 
@@ -64,31 +69,49 @@ export function List() {
                         }}
                       />
 
-                      <Text
+                      <Flex
+                        align="center"
+                        justify="center"
+                        gap="1"
                         className={styles.listingLabel}
-                        size="4"
-                        color={
-                          tank.tree_type === 'collector'
-                            ? 'cyan'
-                            : tank.tree_type === 'premium'
-                            ? 'amber'
-                            : undefined
-                        }
-                        weight="medium"
                         style={{
-                          color:
-                            tank.tree_type === 'tech-tree'
-                              ? slateDark.slate11
-                              : undefined,
                           position: 'absolute',
                           bottom: 8,
                           left: 12,
                         }}
                       >
-                        {tank.name_short ??
+                        <img
-                          tank.name ??
+                          src={
-                          `Unknown tank ${tank.id}`}
+                            (tank.tree_type === 'collector'
-                      </Text>
+                              ? TANK_ICONS_COLLECTOR
+                              : tank.tree_type === 'premium'
+                              ? TANK_ICONS_PREMIUM
+                              : TANK_ICONS)[tank.type]
+                          }
+                          style={{ width: '1em', height: '1em' }}
+                        />
+                        <Text
+                          size="4"
+                          color={
+                            tank.tree_type === 'collector'
+                              ? 'blue'
+                              : tank.tree_type === 'premium'
+                              ? 'amber'
+                              : undefined
+                          }
+                          weight="medium"
+                          style={{
+                            color:
+                              tank.tree_type === 'tech-tree'
+                                ? slateDark.slate11
+                                : undefined,
+                          }}
+                        >
+                          {tank.name_short ??
+                            tank.name ??
+                            `Unknown tank ${tank.id}`}
+                        </Text>
+                      </Flex>
                     </Inset>
                   </Card>
                 </a>

src/core/blitzkrieg/tankopedia.ts

@@ -61,21 +61,21 @@ export const tankNamesDiacritics = tankNames.then((tankNames) =>
   ),
 );
 
-export const TANK_ICONS: Record<string, string> = {
+export const TANK_ICONS: Record<TankType, string> = {
   'AT-SPG': 'https://i.imgur.com/BIHSEH0.png',
   lightTank: 'https://i.imgur.com/CSNha5V.png',
   mediumTank: 'https://i.imgur.com/wvf3ltm.png',
   heavyTank: 'https://i.imgur.com/ECeqlZa.png',
 };
 
-export const TANK_ICONS_PREMIUM: Record<string, string> = {
+export const TANK_ICONS_PREMIUM: Record<TankType, string> = {
   'AT-SPG': 'https://i.imgur.com/TCu3EdR.png',
   lightTank: 'https://i.imgur.com/zdkpTRb.png',
   mediumTank: 'https://i.imgur.com/3z7eHX6.png',
   heavyTank: 'https://i.imgur.com/P3vbmyA.png',
 };
 
-export const TANK_ICONS_COLLECTOR: Record<string, string> = {
+export const TANK_ICONS_COLLECTOR: Record<TankType, string> = {
   'AT-SPG': 'https://i.imgur.com/WTjeirB.png',
   lightTank: 'https://i.imgur.com/EwhtKkU.png',
   mediumTank: 'https://i.imgur.com/u8YDMBh.png',