feat: crew training info

src/app/tools/tankopedia/[id]/components/Characteristics/components/Consumables.tsx

@@ -37,6 +37,8 @@ export function Consumables() {
     <ConfigurationChildWrapper>
       <Flex gap="4" align="center">
         <Flex gap="2" align="center">
+          <Heading size="4">Consumables</Heading>
+
           <Popover.Root>
             <Popover.Trigger>
               <IconButton variant="ghost">
@@ -45,16 +47,12 @@ export function Consumables() {
             </Popover.Trigger>
 
             <Popover.Content>
-              <Flex direction="column" gap="2">
+              <Text>
-                <Text>
+                <Text color="amber">Yellow consumables</Text> do not affect the
-                  <Text color="amber">Yellow consumables</Text> do not affect
+                statistics.
-                  the statistics.
+              </Text>
-                </Text>
-              </Flex>
             </Popover.Content>
           </Popover.Root>
-
-          <Heading size="4">Consumables</Heading>
         </Flex>
 
         <Button

src/app/tools/tankopedia/[id]/components/Characteristics/components/Skills/index.tsx

@@ -41,6 +41,8 @@ export function Skills() {
     <ConfigurationChildWrapper>
       <Flex gap="4" align="center">
         <Flex gap="2" align="center">
+          <Heading size="4">Crew skills</Heading>
+
           <Popover.Root>
             <Popover.Trigger>
               <IconButton variant="ghost">
@@ -61,8 +63,6 @@ export function Skills() {
               </Flex>
             </Popover.Content>
           </Popover.Root>
-
-          <Heading size="4">Crew skills</Heading>
         </Flex>
 
         <Button

src/app/tools/tankopedia/[id]/components/Characteristics/index.tsx

@@ -1,5 +1,13 @@
-import { AccessibilityIcon } from '@radix-ui/react-icons';
+import { AccessibilityIcon, InfoCircledIcon } from '@radix-ui/react-icons';
-import { Flex, Heading, Slider, Text, TextField } from '@radix-ui/themes';
+import {
+  Flex,
+  Heading,
+  IconButton,
+  Popover,
+  Slider,
+  Text,
+  TextField,
+} from '@radix-ui/themes';
 import { debounce } from 'lodash';
 import { use, useEffect, useRef, useState } from 'react';
 import { lerp } from 'three/src/math/MathUtils';
@@ -657,7 +665,24 @@ export function Characteristics() {
       </Flex>
 
       <Flex direction="column" gap="2">
-        <Heading size="5">Crew training</Heading>
+        <Flex gap="2" align="center">
+          <Heading size="5">Crew training</Heading>
+
+          <Popover.Root>
+            <Popover.Trigger>
+              <IconButton variant="ghost">
+                <InfoCircledIcon />
+              </IconButton>
+            </Popover.Trigger>
+
+            <Popover.Content>
+              <Flex gap="1" align="center">
+                <AccessibilityIcon />
+                <Text>represents the other roles a crew member can take.</Text>
+              </Flex>
+            </Popover.Content>
+          </Popover.Root>
+        </Flex>
 
         {tank.crew.map((member) => {
           const count = member.count ?? 1;