feat: testing warning

src/app/tools/tankopedia/[id]/components/Model/HeroSection.tsx

@@ -3,6 +3,7 @@ import { Box, Button, Flex, Heading, Text } from '@radix-ui/themes';
 import Link from 'next/link';
 import { Suspense, use, useEffect, useMemo, useState } from 'react';
 import { classIcons } from '../../../../../../components/ClassIcon';
+import { ScienceIcon } from '../../../../../../components/ScienceIcon';
 import { ThicknessRange } from '../../../../../../components/StaticArmor';
 import { resolveNearPenetration } from '../../../../../../core/blitz/resolveNearPenetration';
 import { tankDefinitions } from '../../../../../../core/blitzkit/tankDefinitions';
@@ -100,15 +101,27 @@ export function HeroSection({ id }: HeroSectionProps) {
               </Heading>
             </Flex>
 
-            <Text color="gray" ml={{ initial: '0', md: '9' }}>
+            <Flex direction="column" ml={{ initial: '0', md: '9' }}>
-              Tier {TIER_ROMAN_NUMERALS[protagonist.tier]}{' '}
+              {tank.testing && (
-              {
+                <Text color="red">
-                (strings.common.nations_adjectives as Record<string, string>)[
+                  <Flex align="center" gap="1">
-                  protagonist.nation
+                    Tank in testing
-                ]
+                    <ScienceIcon width="1em" height="1em" />
-              }{' '}
+                  </Flex>
-              {strings.common.tank_class_short[protagonist.class]}
+                </Text>
-            </Text>
+              )}
+
+              <Text color="gray">
+                Tier {TIER_ROMAN_NUMERALS[protagonist.tier]}{' '}
+                {
+                  (strings.common.nations_adjectives as Record<string, string>)[
+                    protagonist.nation
+                  ]
+                }{' '}
+                {strings.common.tank_class_short[protagonist.class]}
+              </Text>
+            </Flex>
+
             <Flex gap="4" ml={{ initial: '0', md: '9' }} mt="-1">
               <Link href="/tools/tankopedia">
                 <Button variant="ghost" size="1" ml="-1">

src/app/tools/tankopedia/[id]/components/TestingSection.tsx

@@ -0,0 +1,23 @@
+import { Callout, Flex } from '@radix-ui/themes';
+import { ExperimentIcon } from '../../../../../components/ExperimentIcon';
+import * as Duel from '../../../../../stores/duel';
+
+export function TestingSection() {
+  const tank = Duel.use((state) => state.protagonist.tank);
+
+  if (!tank.testing) return null;
+
+  return (
+    <Flex justify="center" mb="4">
+      <Callout.Root>
+        <Callout.Icon>
+          <ExperimentIcon style={{ width: '1em', height: '1em' }} />
+        </Callout.Icon>
+        <Callout.Text>
+          Tanks in testing are subject to change and may not represent the final
+          product.
+        </Callout.Text>
+      </Callout.Root>
+    </Flex>
+  );
+}

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

@@ -12,6 +12,7 @@ import { GameModeSection } from './components/Model/GameModeSection';
 import { HeroSection } from './components/Model/HeroSection';
 import { TechTreeSection } from './components/Model/TechTreeSection';
 import { ShotDisplaySection } from './components/ShotDisplaySection';
+import { TestingSection } from './components/TestingSection';
 import { VideoSection } from './components/VideoSection';
 
 export default function Page({ params }: { params: { id: string } }) {
@@ -78,6 +79,7 @@ export default function Page({ params }: { params: { id: string } }) {
       <HeroSection id={id} />
       <ShotDisplaySection />
       {!exempt && <AdMidSectionResponsive />}
+      <TestingSection />
       <CharacteristicsSection />
       {!exempt && <AdMidSectionResponsive />}
       <GameModeSection />

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

@@ -433,8 +433,8 @@ export const TankSearch = memo<TankSearchProps>(
                 <ExperimentIcon style={{ width: '1em', height: '1em' }} />
               </Callout.Icon>
               <Callout.Text>
-                Tanks in testing are subject to change and many not represent
+                Tanks in testing are subject to change and may not represent the
-                the final product.
+                final product.
               </Callout.Text>
             </Callout.Root>
           </Flex>