feat: some things

src/app/tools/tankopedia/page.tsx

@@ -1,5 +1,14 @@
-import { Flex, Grid, Heading, Separator, Text } from '@radix-ui/themes';
-import { range } from 'lodash';
+import {
+  Button,
+  Flex,
+  Grid,
+  Heading,
+  IconButton,
+  RadioGroup,
+  Separator,
+  Text,
+} from '@radix-ui/themes';
+import { range, times } from 'lodash';
 import { use } from 'react';
 import { classIcons } from '../../../components/ClassIcon';
 import { Link } from '../../../components/Link';
@@ -16,23 +25,119 @@ import { tankIcon } from '../../../core/blitzkit/tankIcon';
 import strings from '../../../lang/en-US.json';
 import { treeTypeOrder } from './components/TankSearch/constants';
 
+// TODO: KEYS
+
 export default function Page() {
   const awaitedTanksDefinitionsArray = use(tanksDefinitionsArray);
   const awaitedNations = use(NATIONS);
 
   return (
-    <PageWrapper color="purple">
-      {/* <TextField.Root size="3" placeholder="Search tanks...">
-        <TextField.Slot />
+    <PageWrapper color="purple" size={1028 + 256}>
+      <Flex gap="8">
+        <Flex direction="column" gap="4" align="start">
+          <Text mb="-3" weight="bold">
+            Class
+          </Text>
+          <Flex
+            direction="column"
+            overflow="hidden"
+            style={{
+              borderRadius: 'var(--radius-4)',
+            }}
+          >
+            <Flex>
+              {times(5, (index) => {
+                const tier = (index + 1) as Tier;
 
-        <TextField.Slot>
-          <Button size="3" variant="ghost">
-            M48 Patton <CaretRightIcon />
+                return (
+                  <Button
+                    variant="soft"
+                    radius="none"
+                    color="gray"
+                    highContrast
+                    style={{
+                      width: 32,
+                    }}
+                  >
+                    {TIER_ROMAN_NUMERALS[tier]}
                   </Button>
-        </TextField.Slot>
-      </TextField.Root> */}
+                );
+              })}
+            </Flex>
+            <Flex>
+              {times(5, (index) => {
+                const tier = (index + 6) as Tier;
 
-      <Flex direction="column" gap="8" mt="4">
+                return (
+                  <Button
+                    variant="soft"
+                    radius="none"
+                    color="gray"
+                    highContrast
+                    style={{
+                      width: 32,
+                    }}
+                  >
+                    {TIER_ROMAN_NUMERALS[tier]}
+                  </Button>
+                );
+              })}
+            </Flex>
+          </Flex>
+
+          <Text mb="-3" weight="bold">
+            Type
+          </Text>
+          <Flex
+            overflow="hidden"
+            style={{
+              borderRadius: 'var(--radius-full)',
+            }}
+          >
+            {TANK_CLASSES.map((tankClass) => {
+              const Icon = classIcons[tankClass];
+
+              return (
+                <IconButton
+                  variant="soft"
+                  radius="none"
+                  color="gray"
+                  highContrast
+                >
+                  <Icon style={{ width: '1em', height: '1em' }} />
+                </IconButton>
+              );
+            })}
+          </Flex>
+
+          <Text mb="-3" weight="bold">
+            Nation
+          </Text>
+          <Flex>
+            {awaitedNations.map((nation) => (
+              <IconButton
+                variant="soft"
+                color="gray"
+                highContrast
+                radius="none"
+              >
+                {/* TODO: trim icons */}
+                <img src={asset(`flags/circle/${nation}.webp`)} />
+              </IconButton>
+            ))}
+          </Flex>
+
+          <Text mb="-3" weight="bold">
+            Test tanks
+          </Text>
+          <RadioGroup.Root defaultValue="include">
+            <RadioGroup.Item value="include">Include</RadioGroup.Item>
+            <RadioGroup.Item value="exclude">Exclude</RadioGroup.Item>
+            <RadioGroup.Item value="only">Only</RadioGroup.Item>
+          </RadioGroup.Root>
+        </Flex>
+
+        <Flex direction="column" gap="8" mt="4" flexGrow="1">
           {range(10, 0).map((tierUntyped) => {
             const tier = tierUntyped as Tier;
             const tierTanks = awaitedTanksDefinitionsArray.filter(
@@ -41,7 +146,7 @@ export default function Page() {
 
             return (
               <Flex key={tier} direction="column" gap="4">
-              <Heading align="center" color="gray">
+                <Heading color="gray" mb="4">
                   Tier {TIER_ROMAN_NUMERALS[tier]}
                 </Heading>
 
@@ -165,6 +270,7 @@ export default function Page() {
             );
           })}
         </Flex>
+      </Flex>
     </PageWrapper>
   );
 }