From c4a6b4a6803bea57676f0211791d93d5be95f5b0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Mon, 19 Aug 2024 20:26:54 -0500
Subject: [PATCH] feat: nation

---
 .../[id]/components/Model/MetaSection.tsx     | 21 ++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/src/app/tools/tankopedia/[id]/components/Model/MetaSection.tsx b/src/app/tools/tankopedia/[id]/components/Model/MetaSection.tsx
index ebf01a638..6fdbd9316 100644
--- a/src/app/tools/tankopedia/[id]/components/Model/MetaSection.tsx
+++ b/src/app/tools/tankopedia/[id]/components/Model/MetaSection.tsx
@@ -26,11 +26,11 @@ export function MetaSection() {
   }
 
   return (
-    <Flex justify="center" py="8" px="4">
-      <Flex align="center" gap="8">
+    <Flex justify="center" align="center" py="8" px="4">
+      <Flex align="center" justify="center" gap="8" wrap="wrap">
         <img alt="Economics" src={tankIcon(tank.id)} />
 
-        <Flex gap="6" wrap="wrap">
+        <Flex gap="6" wrap="wrap" align="start" justify="center">
           <Flex direction="column" gap="2">
             <Heading>Overview</Heading>
 
@@ -38,6 +38,7 @@ export function MetaSection() {
               <Flex direction="column">
                 <Text color="gray">Name</Text>
                 {tank.nameFull && <Text color="gray">Full-name</Text>}
+                <Text color="gray">Nation</Text>
                 <Text color="gray">Tier</Text>
                 <Text color="gray">Class</Text>
                 <Text color="gray">Type</Text>
@@ -51,6 +52,20 @@ export function MetaSection() {
               <Flex direction="column" align="end">
                 <Text>{tank.name}</Text>
                 {tank.nameFull && <Text>{tank.nameFull}</Text>}
+                <Text>
+                  <Flex align="center" gap="1">
+                    <img
+                      style={{ width: '1em', height: '1em' }}
+                      alt={tank.nation}
+                      src={asset(`flags/circle/${tank.nation}.webp`)}
+                    />
+                    {
+                      strings.common.nations[
+                        tank.nation as keyof typeof strings.common.nations
+                      ]
+                    }
+                  </Flex>
+                </Text>
                 <Text>{tank.tier}</Text>
                 <Text>
                   <Flex align="center" gap="1">