feat: experiments

src/app/tools/tankopedia/page.tsx

@@ -4,16 +4,18 @@ import {
   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 { ExperimentIcon } from '../../../components/ExperimentIcon';
 import { Link } from '../../../components/Link';
 import PageWrapper from '../../../components/PageWrapper';
 import { ResearchedIcon } from '../../../components/ResearchedIcon';
+import { ScienceIcon } from '../../../components/ScienceIcon';
+import { ScienceOffIcon } from '../../../components/ScienceOffIcon';
 import { TANK_CLASSES } from '../../../components/Tanks/components/Item/constants';
 import { asset } from '../../../core/blitzkit/asset';
 import { gameDefinitions } from '../../../core/blitzkit/gameDefinitions';
@@ -47,8 +49,15 @@ export default function Page() {
             initial: 'row',
             sm: 'column',
           }}
-          gap="4"
+          gap="2"
-          align="start"
+          align={{
+            initial: 'start',
+            sm: 'start',
+          }}
+          justify={{
+            initial: 'center',
+            sm: 'start',
+          }}
           pt={{
             initial: '0',
             sm: '8',
@@ -233,13 +242,31 @@ export default function Page() {
             </IconButton>
           </Flex>
 
-          <Flex direction="column" gap="2">
+          <Flex
-            <Text wrap="nowrap">Test tanks</Text>
+            overflow="hidden"
-            <RadioGroup.Root defaultValue="include">
+            style={{
-              <RadioGroup.Item value="include">Include</RadioGroup.Item>
+              borderRadius: 'var(--radius-full)',
-              <RadioGroup.Item value="exclude">Exclude</RadioGroup.Item>
+            }}
-              <RadioGroup.Item value="only">Only</RadioGroup.Item>
+            direction={{
-            </RadioGroup.Root>
+              sm: 'row',
+              initial: 'column',
+            }}
+          >
+            <IconButton variant="soft" radius="none" color="gray" highContrast>
+              <ExperimentIcon
+                style={{ width: '1em', height: '1em', color: 'currentColor' }}
+              />
+            </IconButton>
+            <IconButton variant="soft" radius="none" color="gray" highContrast>
+              <ScienceIcon
+                style={{ width: '1em', height: '1em', color: 'currentColor' }}
+              />
+            </IconButton>
+            <IconButton variant="soft" radius="none" color="gray" highContrast>
+              <ScienceOffIcon
+                style={{ width: '1em', height: '1em', color: 'currentColor' }}
+              />
+            </IconButton>
           </Flex>
         </Flex>
 

src/components/ExperimentIcon.tsx

@@ -0,0 +1,16 @@
+import { ComponentProps } from 'react';
+
+export function ExperimentIcon(props: ComponentProps<'svg'>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      height="24px"
+      viewBox="0 -960 960 960"
+      width="24px"
+      fill="currentColor"
+      {...props}
+    >
+      <path d="M200-120q-51 0-72.5-45.5T138-250l222-270v-240h-40q-17 0-28.5-11.5T280-800q0-17 11.5-28.5T320-840h320q17 0 28.5 11.5T680-800q0 17-11.5 28.5T640-760h-40v240l222 270q32 39 10.5 84.5T760-120H200Zm0-80h560L520-492v-268h-80v268L200-200Zm280-280Z" />
+    </svg>
+  );
+}

src/components/ScienceIcon.tsx

@@ -0,0 +1,16 @@
+import { ComponentProps } from 'react';
+
+export function ScienceIcon(props: ComponentProps<'svg'>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      height="24px"
+      viewBox="0 -960 960 960"
+      width="24px"
+      fill="currentColor"
+      {...props}
+    >
+      <path d="M200-120q-51 0-72.5-45.5T138-250l222-270v-240h-40q-17 0-28.5-11.5T280-800q0-17 11.5-28.5T320-840h320q17 0 28.5 11.5T680-800q0 17-11.5 28.5T640-760h-40v240l222 270q32 39 10.5 84.5T760-120H200Zm80-120h400L544-400H416L280-240Zm-80 40h560L520-492v-268h-80v268L200-200Zm280-280Z" />
+    </svg>
+  );
+}

src/components/ScienceOffIcon.tsx

@@ -0,0 +1,16 @@
+import { ComponentProps } from 'react';
+
+export function ScienceOffIcon(props: ComponentProps<'svg'>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      height="24px"
+      viewBox="0 -960 960 960"
+      width="24px"
+      fill="currentColor"
+      {...props}
+    >
+      <path d="m600-473-80-80v-207h-80v127l-80-80v-47h-40q-17 0-28.5-11.5T280-800q0-17 11.5-28.5T320-840h320q17 0 28.5 11.5T680-800q0 17-11.5 28.5T640-760h-40v287ZM200-200h448L402-446 200-200ZM792-56l-64-64H200q-51 0-72.5-45.5T138-250l208-252L56-792l56-56 736 736-56 56ZM402-446Zm78-147Z" />
+    </svg>
+  );
+}