diff --git a/src/app/tools/tankopedia/[id]/components/Characteristics/index.tsx b/src/app/tools/tankopedia/[id]/components/Characteristics/index.tsx index f73d09fe1..e96828092 100644 --- a/src/app/tools/tankopedia/[id]/components/Characteristics/index.tsx +++ b/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,91 +11,124 @@ import { Modules } from './components/Modules'; import { Provisions } from './components/Provisions'; export function Characteristics() { + const [configureVisible, setConfigureVisible] = useState(true); + const [statsVisible, setStatsVisible] = useState(true); + return (
- Configure + setConfigureVisible((state) => !state)} + style={{ + cursor: 'pointer', + }} + > + Configure {configureVisible ? : } + - - - - - - + {configureVisible && ( + + + + + + + + + )}
- Statistics + setStatsVisible((state) => !state)} + style={{ + cursor: 'pointer', + }} + > + Statistics {statsVisible ? : } + - - - Survivability - - + {statsVisible && ( + + + Survivability + + - - Lethality - - - - - - - - - - - - - - - - - + + Lethality + + + + + + + + + + + + + + + + + - - Flexibility - - - - + + Flexibility + + + + - - Mobility - - - - - - - - - - + + Mobility + + + + + + + + + + - - Stealth - - - - - - + + Stealth + + + + + + + - + )} );