feat: collapse

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

@@ -1,4 +1,6 @@
+import { ChevronDownIcon, ChevronUpIcon } from '@radix-ui/react-icons';
 import { Flex, Heading } from '@radix-ui/themes';
+import { useState } from 'react';
 import * as styles from '../../../page.css';
 import { Camouflage } from './components/Camouflage';
 import { Consumables } from './components/Consumables';
@@ -9,23 +11,45 @@ import { Modules } from './components/Modules';
 import { Provisions } from './components/Provisions';
 
 export function Characteristics() {
+  const [configureVisible, setConfigureVisible] = useState(true);
+  const [statsVisible, setStatsVisible] = useState(true);
+
   return (
     <Flex className={styles.characteristics}>
       <div className={styles.configuration}>
-        <Heading>Configure</Heading>
+        <Heading
+          onClick={() => setConfigureVisible((state) => !state)}
+          style={{
+            cursor: 'pointer',
+          }}
+        >
+          Configure {configureVisible ? <ChevronDownIcon /> : <ChevronUpIcon />}
+        </Heading>
 
+        {configureVisible && (
+          <Flex direction="column" gap="4">
             <Modules />
             <Equipments />
             <Crew />
             <Consumables />
             <Provisions />
             <Camouflage />
+          </Flex>
+        )}
       </div>
 
       <Flex style={{ flex: 1 }} wrap="wrap" direction="column" gap="4">
-        <Heading>Statistics</Heading>
+        <Heading
+          onClick={() => setStatsVisible((state) => !state)}
+          style={{
+            cursor: 'pointer',
+          }}
+        >
+          Statistics {statsVisible ? <ChevronDownIcon /> : <ChevronUpIcon />}
+        </Heading>
 
-        <Flex direction="column" gap="6">
+        {statsVisible && (
+          <Flex direction="column" gap="4">
             <Flex direction="column" gap="2">
               <Heading size="4">Survivability</Heading>
               <Info name="Health" value="2014" unit="hp" />
@@ -40,7 +64,12 @@ export function Characteristics() {
               <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
+                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" />
@@ -68,7 +97,12 @@ export function Characteristics() {
                 value="36.86"
                 unit="hp/kg"
               />
-            <Info indent name="On medium 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"
@@ -94,6 +128,7 @@ export function Characteristics() {
               />
             </Flex>
           </Flex>
+        )}
       </Flex>
     </Flex>
   );