feat: better layout

src/app/tools/player-stats/[id]/page.tsx

@@ -1,27 +1,23 @@
 'use client';
 
-import { ExclamationTriangleIcon } from '@radix-ui/react-icons';
 import {
   Box,
-  Callout,
   Flex,
   Heading,
   Link,
   Popover,
-  Tabs,
   Text,
+  Theme,
 } from '@radix-ui/themes';
 import { useState } from 'react';
 import { BkniIndicator } from '../../../../components/BkniIndicator';
 import { DatePicker } from '../../../../components/DatePicker';
-import PageWrapper from '../../../../components/PageWrapper';
 import { getAccountInfo } from '../../../../core/blitz/getAccountInfo';
 import { getClanAccountInfo } from '../../../../core/blitz/getClanAccountInfo';
 import { idToRegion } from '../../../../core/blitz/idToRegion';
 import { parseBkni } from '../../../../core/blitzkit/parseBkni';
 import { useAwait } from '../../../../hooks/useAwait';
 import strings from '../../../../lang/en-US.json';
-import { FlippedTrigger } from './components/FlippedTrigger';
 import * as styles from './page.css';
 
 export default function Page({ params }: { params: { id: string } }) {
@@ -39,12 +35,12 @@ export default function Page({ params }: { params: { id: string } }) {
   );
   const stats = [
     ['Winrate', '70%'],
-    ['Damage', '3,203'],
-    ['Damage ratio', '2.45'],
-    ['Tier', '9.83'],
     ['Survival', '70%'],
-    ['Accuracy', '91%'],
+    ['Damage', '3,203'],
+    ['Tier', '9.83'],
     ['Kills', '1.54'],
+    ['Damage ratio', '2.45'],
+    ['Accuracy', '91%'],
   ];
   const [customTo, setCustomTo] = useState<Date>(new Date());
   const [fromSelectorOpen, setFromSelectorOpen] = useState(false);
@@ -52,62 +48,19 @@ export default function Page({ params }: { params: { id: string } }) {
 
   return (
     <>
-      <PageWrapper
+      <Theme accentColor={bkniColor}>
-        p={{
-          initial: '6',
-          md: '8',
-        }}
-        pt={{
-          initial: '9',
-          md: '8',
-        }}
-        size={1024}
-        noFlex1
-        position="relative"
-        color={bkniColor}
-        containerProps={{
-          style: {
-            background: `linear-gradient(var(--${bkniColor}-a2), var(--${bkniColor}-a1))`,
-          },
-        }}
-      >
-        <Tabs.Root
-          style={{
-            position: 'absolute',
-            top: 0,
-            left: '50%',
-            transform: 'scaleY(-1) translateX(-50%)',
-          }}
-          value={`${period}`}
-          onValueChange={(value) => {
-            setPeriod(value === 'custom' ? 'custom' : Number(value));
-          }}
-        >
-          <Tabs.List justify="center">
-            <FlippedTrigger value="1">Today</FlippedTrigger>
-            <FlippedTrigger value="30">30 days</FlippedTrigger>
-            <FlippedTrigger value="Infinity">Career</FlippedTrigger>
-            <FlippedTrigger value="custom">Custom</FlippedTrigger>
-          </Tabs.List>
-        </Tabs.Root>
-
-        <Flex
-          justify="between"
-          align="center"
-          direction={{
-            initial: 'column',
-            md: 'row',
-          }}
-          gap="4"
-        >
         <Flex
           direction="column"
-            align={{
+          align="center"
-              initial: 'center',
+          p="8"
-              md: 'start',
+          gap="8"
+          style={{
+            background: `linear-gradient(var(--${bkniColor}-a2), var(--${bkniColor}-a1))`,
           }}
         >
-            <Heading size="8">{accountInfo.nickname}</Heading>
+          <Flex width="100%" maxWidth="1600px" align="center">
+            <Flex style={{ flex: 1 }} direction="column" align="start" gap="4">
+              <Heading size="9">{accountInfo.nickname}</Heading>
 
               <Text color="gray">
                 {clanAccountInfo?.clan && `[${clanAccountInfo.clan.tag}] • `}
@@ -117,13 +70,33 @@ export default function Page({ params }: { params: { id: string } }) {
                     : strings.common.regions.normal)[region]
                 }
               </Text>
+
+              {/* <Flex gap="4" mt="-1">
+                <Link href="/tools/tankopedia">
+                  <Button variant="ghost" size="1" ml="-1">
+                    <ChevronLeftIcon />
+                    Back
+                  </Button>
+                </Link>
+              </Flex> */}
             </Flex>
 
+            <Flex style={{ flex: 1 }} justify="center">
               <BkniIndicator bkni={bkni} className={styles.bkniIndicator} />
             </Flex>
-      </PageWrapper>
 
-      <PageWrapper color={bkniColor} noFlex1 align="center">
+            <Flex style={{ flex: 1 }} wrap="wrap" gap="2" justify="center">
+              {stats.map((stat) => (
+                <Flex minWidth="96px" direction="column" align="center">
+                  <Text size="7">{stat[1]}</Text>
+                  <Text color="gray" size="2">
+                    {stat[0]}
+                  </Text>
+                </Flex>
+              ))}
+            </Flex>
+          </Flex>
+
           {period === 'custom' && (
             <Text>
               From{' '}
@@ -178,22 +151,47 @@ export default function Page({ params }: { params: { id: string } }) {
               </Popover.Root>
             </Text>
           )}
+        </Flex>
+      </Theme>
+
+      <Box flexGrow="1" />
+
+      {/* <PageWrapper
+        p="6"
+        pt="9"
+        size={1600}
+        noFlex1
+        position="relative"
+        color={bkniColor}
+        containerProps={{
+          style: {
+            background: `linear-gradient(var(--${bkniColor}-a2), var(--${bkniColor}-a1))`,
+          },
+        }}
+      >
+        <Tabs.Root
+          style={{
+            position: 'absolute',
+            top: 0,
+            left: '50%',
+            transform: 'scaleY(-1) translateX(-50%)',
+          }}
+          value={`${period}`}
+          onValueChange={(value) => {
+            setPeriod(value === 'custom' ? 'custom' : Number(value));
+          }}
+        >
+          <Tabs.List justify="center">
+            <FlippedTrigger value="1">Today</FlippedTrigger>
+            <FlippedTrigger value="30">30 days</FlippedTrigger>
+            <FlippedTrigger value="Infinity">Career</FlippedTrigger>
+            <FlippedTrigger value="custom">Custom</FlippedTrigger>
+          </Tabs.List>
+        </Tabs.Root>
+
+       
 
-        <Flex direction="column" align="center">
-          <Heading size="9">72%</Heading>
-          <Text color="gray">Winrate</Text>
-        </Flex>
         
-        <Flex wrap="wrap" gap="2" justify="center" maxWidth="416px">
-          {stats.map((stat) => (
-            <Flex minWidth="96px" direction="column" align="center">
-              <Text size="7">{stat[1]}</Text>
-              <Text color="gray" size="2">
-                {stat[0]}
-              </Text>
-            </Flex>
-          ))}
-        </Flex>
       </PageWrapper>
 
       <Flex flexGrow="1" justify="center" align="center" p="4">
@@ -208,7 +206,7 @@ export default function Page({ params }: { params: { id: string } }) {
         </Callout.Root>
       </Flex>
 
-      {isTracking && <Box flexGrow="1" />}
+      {isTracking && <Box flexGrow="1" />} */}
     </>
   );
 }