feat: tier display

src/app/tools/tankopedia/page.tsx

@@ -13,6 +13,7 @@ import {
   TANK_ICONS,
   TANK_ICONS_COLLECTOR,
   TANK_ICONS_PREMIUM,
+  TIER_ROMAN_NUMERALS,
   tanks,
 } from '../../../core/blitzkrieg/tankopedia';
 import { theme } from '../../../stitches.config';
@@ -127,6 +128,8 @@ export default function Page() {
                 href={`/tools/tankopedia/${tank.id}`}
                 style={{
                   flex: 1,
+                  textDecoration: 'none',
+                  color: 'unset',
                 }}
               >
                 <Card className={styles.listing}>
@@ -180,15 +183,17 @@ export default function Page() {
 
                     <Flex
                       align="center"
-                      justify="center"
+                      justify="between"
-                      gap="1"
                       className={styles.listingLabel}
                       style={{
                         position: 'absolute',
                         bottom: 8,
-                        left: 12,
+                        padding: '0 12px',
+                        width: '100%',
+                        boxSizing: 'border-box',
                       }}
                     >
+                      <Flex align="center" justify="center" gap="1">
                         <img
                           src={
                             (tank.tree_type === 'collector'
@@ -221,6 +226,11 @@ export default function Page() {
                             `Unknown tank ${tank.id}`}
                         </Text>
                       </Flex>
+
+                      <Text size="4" color="gray" highContrast={false}>
+                        {TIER_ROMAN_NUMERALS[tank.tier]}
+                      </Text>
+                    </Flex>
                   </Inset>
                 </Card>
               </a>