feat: start of tank page

src/app/tools/layout.tsx

@@ -11,7 +11,7 @@ interface ToolsLayoutProps {
 
 export default function ToolsLayout({ children }: ToolsLayoutProps) {
   const pathname = usePathname();
-  const toolId = pathname.split('/').at(-1);
+  const toolId = pathname.split('/').at(2);
   const tool = TOOLS.find((tool) => tool.id === toolId);
 
   return (

src/app/tools/tankopedia/[id]/page.tsx

@@ -0,0 +1,21 @@
+import { Flex, Heading } from '@radix-ui/themes';
+import { use } from 'react';
+import { Flag } from '../../../../components/Flag';
+import PageWrapper from '../../../../components/PageWrapper';
+import { tankDefinitions } from '../../../../core/blitzkrieg/definitions/tanks';
+
+// get [id] form the path
+export default function Page({ params }: { params: { id: string } }) {
+  const id = parseInt(params.id);
+  const awaitedTankDefinitions = use(tankDefinitions);
+  const definition = awaitedTankDefinitions[id];
+
+  return (
+    <PageWrapper>
+      <Flex gap="2" align="center">
+        <Flag nation={definition.nation} />
+        <Heading>{definition.name}</Heading>
+      </Flex>
+    </PageWrapper>
+  );
+}

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

@@ -3,6 +3,7 @@
 import { CaretDownIcon } from '@radix-ui/react-icons';
 import { Button, DropdownMenu, Flex } from '@radix-ui/themes';
 import { use } from 'react';
+import { Flag } from '../../../../../components/Flag';
 import {
   TANK_TYPES,
   TREE_TYPES,
@@ -10,7 +11,6 @@ import {
   TREE_TYPE_IMAGES,
   TreeTypeEnum,
 } from '../../../../../components/Tanks';
-import { asset } from '../../../../../core/blitzkrieg/asset';
 import {
   NATIONS,
   TIERS,
@@ -267,15 +267,7 @@ export function Options() {
                   })
                 }
               >
-                <img
+                <Flag nation={nation} />
-                  src={asset(`flags/circle/${nation}.webp`)}
-                  style={{
-                    width: '1em',
-                    height: '1em',
-                    scale: 2,
-                    transform: 'translate(15%, 15%)',
-                  }}
-                />
               </Button>
             ))}
           </Flex>
@@ -314,15 +306,7 @@ export function Options() {
                   })
                 }
               >
-                <img
+                <Flag nation={nation} />
-                  src={asset(`flags/circle/${nation}.webp`)}
-                  style={{
-                    width: '1em',
-                    height: '1em',
-                    scale: 2,
-                    transform: 'translate(15%, 15%)',
-                  }}
-                />
               </Button>
             ))}
           </Flex>
@@ -394,15 +378,7 @@ export function Options() {
                 })
               }
             >
-              <img
+              <Flag nation={nation} />
-                src={asset(`flags/circle/${nation}.webp`)}
-                style={{
-                  width: '1em',
-                  height: '1em',
-                  scale: 2,
-                  transform: 'translate(15%, 15%)',
-                }}
-              />
             </Button>
           ))}
         </Flex>

src/components/Flag.tsx

@@ -0,0 +1,19 @@
+import { asset } from '../core/blitzkrieg/asset';
+
+interface FlagProps {
+  nation: string;
+}
+
+export function Flag({ nation }: FlagProps) {
+  return (
+    <div
+      style={{
+        width: 22,
+        height: 22,
+        overflow: 'hidden',
+      }}
+    >
+      <img src={asset(`flags/circle/${nation}.webp`)} alt={nation} />
+    </div>
+  );
+}