feat: sides

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

@@ -1,6 +1,4 @@
-import { ChevronDownIcon, ChevronUpIcon } from '@radix-ui/react-icons';
+import { Flex, Heading, Tabs } from '@radix-ui/themes';
-import { Flex, Heading } from '@radix-ui/themes';
-import { useState } from 'react';
 import { Camouflage } from './components/Camouflage';
 import { Consumables } from './components/Consumables';
 import { Crew } from './components/Crew';
@@ -9,158 +7,108 @@ import { Info } from './components/Info';
 import { Modules } from './components/Modules';
 import { Provisions } from './components/Provisions';
 
-interface CharacteristicsProps {
+export function Characteristics() {
-  config?: boolean;
-}
-
-export function Characteristics({ config }: CharacteristicsProps) {
-  const [configureVisible, setConfigureVisible] = useState(true);
-  const [statsVisible, setStatsVisible] = useState(true);
-
   return (
-    <Flex gap="8" direction="column" wrap="wrap">
+    <Tabs.Root defaultValue="configure">
-      {config && (
+      <Flex gap="4" direction="column">
-        <Flex
+        <Tabs.List>
-          style={{ flex: 1, minWidth: 320, position: 'sticky', top: 64 }}
+          <Tabs.Trigger value="configure">Configure</Tabs.Trigger>
-          direction="column"
+          <Tabs.Trigger value="statistics">Statistics</Tabs.Trigger>
-          gap="4"
+        </Tabs.List>
-        >
-          <Heading
-            onClick={() => setConfigureVisible((state) => !state)}
-            style={{
-              cursor: 'pointer',
-            }}
-          >
-            Configure{' '}
-            {configureVisible ? <ChevronDownIcon /> : <ChevronUpIcon />}
-          </Heading>
 
-          {configureVisible && (
+        <Tabs.Content value="statistics">
-            <Flex direction="column" gap="4">
+          <Flex direction="column" gap="4">
-              <Modules />
+            <Flex direction="column" gap="2">
-              <Equipments />
+              <Heading size="4">Survivability</Heading>
-              <Crew />
+              <Info name="Health" value="2014" unit="hp" />
-              <Consumables />
-              <Provisions />
-              <Camouflage />
             </Flex>
-          )}
-        </Flex>
-      )}
 
-      {!config && (
+            <Flex direction="column" gap="2">
-        <Flex
+              <Heading size="4">Lethality</Heading>
-          style={{ flex: 1, minWidth: 320, position: 'sticky', top: 64 }}
+              <Info name="Armor damage" value="330" unit="hp" />
-          direction="column"
+              <Info indent name="Module damage" value="125" unit="hp" />
-          gap="4"
+              <Info indent name="Caliber" value="100" unit="mm" />
-        >
+              <Info name="Penetration" value="257" unit="mm" />
-          <Heading
+              <Info indent name="At 500m" value="240" unit="mm" />
-            onClick={() => setStatsVisible((state) => !state)}
+              <Info name="Damage per minute" value="2316" unit="hp / min" />
-            style={{
+              <Info indent name="Maximum" value="2316" unit="hp / min" />
-              cursor: 'pointer',
+              <Info
-            }}
+                indent
-          >
+                name="Effective at 60s"
-            Statistics {statsVisible ? <ChevronDownIcon /> : <ChevronUpIcon />}
+                value="2316"
-          </Heading>
+                unit="hp / min"
-
+              />
-          {statsVisible && (
+              <Info name="Reload" value="5.73" unit="s" />
-            <Flex direction="column" gap="4">
+              <Info name="Shell velocity" value="1535" unit="m/s" />
-              <Flex direction="column" gap="2">
+              <Info name="Aim time" value="1.72" unit="s" />
-                <Heading size="4">Survivability</Heading>
+              <Info name="Dispersion" value="0.326" unit="m" />
-                <Info name="Health" value="2014" unit="hp" />
+              <Info indent name="On move" value="0.100" unit="m" />
-              </Flex>
+              <Info indent name="On hull traverse" value="0.100" unit="m" />
-
+              <Info indent name="On turret traverse" value="0.070" unit="m" />
-              <Flex direction="column" gap="2">
+              <Info indent name="On shoot" value="3.500" unit="m" />
-                <Heading size="4">Lethality</Heading>
-                <Info name="Armor damage" value="330" unit="hp" />
-                <Info indent name="Module damage" value="125" unit="hp" />
-                <Info indent name="Caliber" value="100" unit="mm" />
-                <Info name="Penetration" value="257" unit="mm" />
-                <Info indent name="At 500m" value="240" unit="mm" />
-                <Info name="Damage per minute" value="2316" unit="hp / min" />
-                <Info indent name="Maximum" value="2316" unit="hp / min" />
-                <Info
-                  indent
-                  name="Effective at 60s"
-                  value="2316"
-                  unit="hp / min"
-                />
-                <Info name="Reload" value="5.73" unit="s" />
-                <Info name="Shell velocity" value="1535" unit="m/s" />
-                <Info name="Aim time" value="1.72" unit="s" />
-                <Info name="Dispersion" value="0.326" unit="m" />
-                <Info indent name="On move" value="0.100" unit="m" />
-                <Info indent name="On hull traverse" value="0.100" unit="m" />
-                <Info indent name="On turret traverse" value="0.070" unit="m" />
-                <Info indent name="On shoot" value="3.500" unit="m" />
-              </Flex>
-
-              <Flex direction="column" gap="2">
-                <Heading size="4">Flexibility</Heading>
-                <Info name="Gun depression" value="20" unit="°" />
-                <Info indent name="Elevation" value="7" unit="°" />
-                <Info indent name="Azimuth" value="30, 30" unit="°" />
-              </Flex>
-
-              <Flex direction="column" gap="2">
-                <Heading size="4">Mobility</Heading>
-                <Info name="Weight" value="45" unit="mt" />
-                <Info name="Speed forwards" value="55" unit="km/s" />
-                <Info indent name="Backward" value="20" unit="km/s" />
-                <Info
-                  name="Effective power on hard terrain"
-                  value="36.86"
-                  unit="hp/kg"
-                />
-                <Info
-                  indent
-                  name="On medium terrain"
-                  value="36.86"
-                  unit="hp/kg"
-                />
-                <Info
-                  indent
-                  name="On soft terrain"
-                  value="36.86"
-                  unit="hp/kg"
-                />
-                <Info
-                  name="Traverse speed on hard terrain"
-                  value="36.86"
-                  unit="°/s"
-                />
-                <Info
-                  indent
-                  name="On medium terrain"
-                  value="36.86"
-                  unit="°/s"
-                />
-                <Info indent name="On soft terrain" value="36.86" unit="°/s" />
-              </Flex>
-
-              <Flex direction="column" gap="2">
-                <Heading size="4">Stealth</Heading>
-                <Info name="View range" value="302" unit="m" />
-                <Info name="Size" value="6.21 x 2.43 x 2.00" unit="m" />
-                <Info name="Camouflage when still" value="30.00" unit="%" />
-                <Info indent name="When moving" value="30.00" unit="%" />
-                <Info
-                  indent
-                  name="When shooting still"
-                  value="30.00"
-                  unit="%"
-                />
-                <Info
-                  indent
-                  name="When shooting while moving"
-                  value="30.00"
-                  unit="%"
-                />
-              </Flex>
             </Flex>
-          )}
+
-        </Flex>
+            <Flex direction="column" gap="2">
-      )}
+              <Heading size="4">Flexibility</Heading>
-    </Flex>
+              <Info name="Gun depression" value="20" unit="°" />
+              <Info indent name="Elevation" value="7" unit="°" />
+              <Info indent name="Azimuth" value="30, 30" unit="°" />
+            </Flex>
+
+            <Flex direction="column" gap="2">
+              <Heading size="4">Mobility</Heading>
+              <Info name="Weight" value="45" unit="mt" />
+              <Info name="Speed forwards" value="55" unit="km/s" />
+              <Info indent name="Backward" value="20" unit="km/s" />
+              <Info
+                name="Effective power on hard terrain"
+                value="36.86"
+                unit="hp/kg"
+              />
+              <Info
+                indent
+                name="On medium terrain"
+                value="36.86"
+                unit="hp/kg"
+              />
+              <Info indent name="On soft terrain" value="36.86" unit="hp/kg" />
+              <Info
+                name="Traverse speed on hard terrain"
+                value="36.86"
+                unit="°/s"
+              />
+              <Info indent name="On medium terrain" value="36.86" unit="°/s" />
+              <Info indent name="On soft terrain" value="36.86" unit="°/s" />
+            </Flex>
+
+            <Flex direction="column" gap="2">
+              <Heading size="4">Stealth</Heading>
+              <Info name="View range" value="302" unit="m" />
+              <Info name="Size" value="6.21 x 2.43 x 2.00" unit="m" />
+              <Info name="Camouflage when still" value="30.00" unit="%" />
+              <Info indent name="When moving" value="30.00" unit="%" />
+              <Info indent name="When shooting still" value="30.00" unit="%" />
+              <Info
+                indent
+                name="When shooting while moving"
+                value="30.00"
+                unit="%"
+              />
+            </Flex>
+          </Flex>
+        </Tabs.Content>
+
+        <Tabs.Content value="configure">
+          <Flex direction="column" gap="4">
+            <Modules />
+            <Equipments />
+            <Crew />
+            <Consumables />
+            <Provisions />
+            <Camouflage />
+          </Flex>
+        </Tabs.Content>
+      </Flex>
+    </Tabs.Root>
   );
 }

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

@@ -1,5 +1,4 @@
-import { ArrowLeftIcon } from '@radix-ui/react-icons';
+import { Flex, Heading } from '@radix-ui/themes';
-import { Flex, Heading, Link, Text } from '@radix-ui/themes';
 import { Flag } from '../../../../../components/Flag';
 import { useDuel } from '../../../../../stores/duel';
 
@@ -8,16 +7,6 @@ export function Title() {
 
   return (
     <Flex justify="between" align="center">
-      <Link
-        href="/tools/tankopedia"
-        style={{ color: 'unset', textDecoration: 'none' }}
-      >
-        <Flex gap="1" align="center">
-          <ArrowLeftIcon />
-          <Text>Back</Text>
-        </Flex>
-      </Link>
-
       <Flex gap="2" align="center">
         <Flag nation={protagonist.tank.nation} />
         <Heading>{protagonist.tank.name}</Heading>

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

@@ -79,39 +79,34 @@ export default function Page({ params }: { params: { id: string } }) {
   }, [id, assigned]);
 
   return (
-    <PageWrapper color="purple" size="full">
+    <PageWrapper color="purple" size="double">
       {assigned && (
-        <Flex style={{ width: '100%' }} justify="center">
+        <>
+          <Title />
+
           <Flex
+            style={{ width: '100%' }}
             gap="8"
             direction="row"
             align="start"
             justify="center"
-            style={{
-              width: '100%',
-              // maxWidth: 1024,
-            }}
           >
-            <Characteristics config />
+            <Characteristics />
 
             <Flex
               gap="4"
               direction="column"
               style={{
                 flex: 1,
-                maxWidth: 640,
                 position: 'sticky',
                 top: 64,
               }}
             >
-              <Title />
               <TankSandbox />
               <AntagonistBar />
             </Flex>
-
-            <Characteristics />
           </Flex>
-        </Flex>
+        </>
       )}
     </PageWrapper>
   );

src/components/PageWrapper.tsx

@@ -3,7 +3,7 @@ import { ComponentProps } from 'react';
 
 interface PageWrapperProps extends ComponentProps<typeof Flex> {
   color?: ComponentProps<typeof Theme>['accentColor'];
-  size?: 'regular' | 'wide' | 'full';
+  size?: 'regular' | 'wide' | 'double';
 }
 
 export default function PageWrapper({
@@ -19,7 +19,7 @@ export default function PageWrapper({
         gap="4"
         style={{
           width: '100%',
-          maxWidth: size === 'regular' ? 800 : size === 'full' ? '100%' : 960,
+          maxWidth: size === 'regular' ? 800 : size === 'double' ? 1200 : 960,
           margin: 'auto',
           padding: 16,
           boxSizing: 'border-box',