diff --git a/src/app/tools/tankopedia/[id]/components/Characteristics/index.tsx b/src/app/tools/tankopedia/[id]/components/Characteristics/index.tsx index f7fad827e..53be76097 100644 --- a/src/app/tools/tankopedia/[id]/components/Characteristics/index.tsx +++ b/src/app/tools/tankopedia/[id]/components/Characteristics/index.tsx @@ -1,6 +1,4 @@ -import { ChevronDownIcon, ChevronUpIcon } from '@radix-ui/react-icons'; -import { Flex, Heading } from '@radix-ui/themes'; -import { useState } from 'react'; +import { Flex, Heading, Tabs } from '@radix-ui/themes'; 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 { - config?: boolean; -} - -export function Characteristics({ config }: CharacteristicsProps) { - const [configureVisible, setConfigureVisible] = useState(true); - const [statsVisible, setStatsVisible] = useState(true); - +export function Characteristics() { return ( - - {config && ( - - setConfigureVisible((state) => !state)} - style={{ - cursor: 'pointer', - }} - > - Configure{' '} - {configureVisible ? : } - + + + + Configure + Statistics + - {configureVisible && ( - - - - - - - + + + + Survivability + - )} - - )} - {!config && ( - - setStatsVisible((state) => !state)} - style={{ - cursor: 'pointer', - }} - > - Statistics {statsVisible ? : } - - - {statsVisible && ( - - - Survivability - - - - - Lethality - - - - - - - - - - - - - - - - - - - - Flexibility - - - - - - - Mobility - - - - - - - - - - - - - Stealth - - - - - - - + + Lethality + + + + + + + + + + + + + + + + - )} - - )} - + + + Flexibility + + + + + + + Mobility + + + + + + + + + + + + + Stealth + + + + + + + + + + + + + + + + + + + + + + ); } diff --git a/src/app/tools/tankopedia/[id]/components/Title.tsx b/src/app/tools/tankopedia/[id]/components/Title.tsx index 95e2571ed..f3a6443b3 100644 --- a/src/app/tools/tankopedia/[id]/components/Title.tsx +++ b/src/app/tools/tankopedia/[id]/components/Title.tsx @@ -1,5 +1,4 @@ -import { ArrowLeftIcon } from '@radix-ui/react-icons'; -import { Flex, Heading, Link, Text } from '@radix-ui/themes'; +import { Flex, Heading } from '@radix-ui/themes'; import { Flag } from '../../../../../components/Flag'; import { useDuel } from '../../../../../stores/duel'; @@ -8,16 +7,6 @@ export function Title() { return ( - - - - Back - - - {protagonist.tank.name} diff --git a/src/app/tools/tankopedia/[id]/page.tsx b/src/app/tools/tankopedia/[id]/page.tsx index f3b2280c5..381e1ff1e 100644 --- a/src/app/tools/tankopedia/[id]/page.tsx +++ b/src/app/tools/tankopedia/[id]/page.tsx @@ -79,39 +79,34 @@ export default function Page({ params }: { params: { id: string } }) { }, [id, assigned]); return ( - + {assigned && ( - + <> + + <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> ); diff --git a/src/components/PageWrapper.tsx b/src/components/PageWrapper.tsx index defdb9553..98ba0a074 100644 --- a/src/components/PageWrapper.tsx +++ b/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',