feat: better header

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

@@ -1,14 +1,9 @@
-import { TimerIcon } from '@radix-ui/react-icons';
-import { Button, Flex, Heading, Popover, Text } from '@radix-ui/themes';
+import { Box, Flex, Heading, Text } from '@radix-ui/themes';
+import { BkniIndicator } from '../../../../components/BkniIndicator';
 import PageWrapper from '../../../../components/PageWrapper';
 import { getAccountInfo } from '../../../../core/blitz/getAccountInfo';
 import { getClanAccountInfo } from '../../../../core/blitz/getClanAccountInfo';
 import { idToRegion } from '../../../../core/blitz/idToRegion';
-import getBkniPercentile, {
-  BKNI_COLORS,
-  BKNI_PERCENTILES,
-  BkniPercentile,
-} from '../../../../core/statistics/getBkniPercentile';
 import strings from '../../../../lang/en-US.json';
 
 export default async function Page({ params }: { params: { id: string } }) {
@@ -16,110 +11,34 @@ export default async function Page({ params }: { params: { id: string } }) {
   const region = idToRegion(id);
   const accountInfo = await getAccountInfo(region, id);
   const clanAccountInfo = await getClanAccountInfo(region, id, ['clan']);
-  const bkniRaw = Math.random() * 2 - 1;
-  const bkniFraction = (bkniRaw + 1) / 2;
-  const bkniMetric = Math.round(bkniFraction * 200);
-  const bkniPercentile = getBkniPercentile(bkniMetric);
-  const lastBkniPercentile = Math.max(0, bkniPercentile - 1) as BkniPercentile;
-  const bkniColor = BKNI_COLORS[bkniPercentile];
-  const lastBkniColor = BKNI_COLORS[lastBkniPercentile];
+  const bkni = Math.random() * 2 - 1;
 
   return (
-    <PageWrapper color="blue">
-      <Flex gap="2">
-        <Heading>{accountInfo.nickname}</Heading>
-        {clanAccountInfo?.clan && (
-          <Heading color="gray">[{clanAccountInfo.clan.tag}]</Heading>
-        )}
-      </Flex>
+    <>
+      <PageWrapper
+        py="8"
+        color="blue"
+        containerProps={{
+          style: {
+            backgroundColor: 'var(--color-surface)',
+          },
+        }}
+      >
+        <Flex justify="between" align="center">
+          <Flex direction="column">
+            <Heading size="8">{accountInfo.nickname} </Heading>
 
-      <Flex direction="column" align="center">
-        <svg
-          width={180}
-          height={100}
-          style={{
-            transform: 'scaleX(-1)',
-          }}
-        >
-          <defs>
-            <linearGradient id="bkni-gradient">
-              <stop offset="0%" stopColor={`var(--${bkniColor}-indicator)`} />
-              <stop offset="50%" stopColor={`var(--${bkniColor}-indicator)`} />
-              <stop
-                offset="100%"
-                stopColor={`var(--${lastBkniColor}-indicator)`}
-              />
-            </linearGradient>
-          </defs>
+            <Text color="gray">
+              {clanAccountInfo?.clan && `[${clanAccountInfo.clan.tag}] • `}
+              {strings.common.regions.normal[region]}
+            </Text>
+          </Flex>
 
-          <circle
-            cx={90}
-            cy={90}
-            r={80}
-            strokeLinecap="round"
-            fill="none"
-            stroke="var(--color-panel-solid)"
-            strokeWidth={20}
-            strokeDasharray={80 * Math.PI}
-            strokeDashoffset={80 * Math.PI}
-          />
-          <circle
-            cx={90}
-            cy={90}
-            r={80}
-            strokeLinecap="round"
-            fill="none"
-            stroke="url(#bkni-gradient)"
-            strokeWidth={20}
-            strokeDasharray={(160 - 80 * bkniFraction) * Math.PI}
-            strokeDashoffset={(160 - 80 * bkniFraction) * Math.PI}
-          />
-        </svg>
-
-        <Flex direction="column" align="center" mt="-8">
-          <Text weight="bold" size="8">
-            {bkniMetric}
-          </Text>
-
-          <Popover.Root>
-            <Popover.Trigger>
-              <Button color="gray" size="2" variant="ghost">
-                <TimerIcon />
-                {strings.common.bkni_percentile[bkniPercentile]}
-              </Button>
-            </Popover.Trigger>
-
-            <Popover.Content align="center">
-              <Flex
-                direction="column"
-                style={{
-                  width: 'fit-content',
-                }}
-              >
-                <Flex direction="column" mb="3">
-                  <Heading weight="bold" size="5">
-                    BlitzKit Neutrality Index
-                  </Heading>
-                  <Text size="2" color="gray" wrap="wrap">
-                    A next generation performance metric
-                  </Text>
-                </Flex>
-
-                {BKNI_PERCENTILES.map(({ percentile, min }, index) => (
-                  <Button radius="none" color={BKNI_COLORS[percentile]}>
-                    <Flex align="center" justify="between" width="100%" gap="2">
-                      <Text>{strings.common.bkni_percentile[percentile]}</Text>
-                      <Text size="1">
-                        {min} - {BKNI_PERCENTILES[index + 1]?.min ?? 200}
-                      </Text>
-                    </Flex>
-                  </Button>
-                ))}
-              </Flex>
-            </Popover.Content>
-          </Popover.Root>
+          <BkniIndicator bkni={bkni} />
         </Flex>
-      </Flex>
-    </PageWrapper>
+      </PageWrapper>
+
+      <Box flexGrow="1" />
+    </>
   );
 }

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

@@ -69,7 +69,7 @@ export default function Page({ params }: { params: { id: string } }) {
   }, []);
 
   return (
-    <PageWrapper noPadding noMaxWidth color="purple" size={1600}>
+    <PageWrapper p="0" noMaxWidth color="purple" size={1600}>
       {assigned && (
         <>
           <HeroSection />

src/components/BkniIndicator.tsx

@@ -0,0 +1,111 @@
+import { TimerIcon } from '@radix-ui/react-icons';
+import { Button, Flex, Heading, Popover, Text } from '@radix-ui/themes';
+import getBkniPercentile, {
+  BKNI_COLORS,
+  BKNI_PERCENTILES,
+  BkniPercentile,
+} from '../core/statistics/getBkniPercentile';
+import strings from '../lang/en-US.json';
+
+interface BkniIndicatorProps {
+  bkni: number;
+}
+
+export function BkniIndicator({ bkni }: BkniIndicatorProps) {
+  const bkniFraction = (bkni + 1) / 2;
+  const bkniMetric = Math.round(bkniFraction * 200);
+  const bkniPercentile = getBkniPercentile(bkniMetric);
+  const lastBkniPercentile = Math.max(0, bkniPercentile - 1) as BkniPercentile;
+  const bkniColor = BKNI_COLORS[bkniPercentile];
+  const lastBkniColor = BKNI_COLORS[lastBkniPercentile];
+
+  return (
+    <Flex direction="column" align="center">
+      <svg
+        width={180}
+        height={100}
+        style={{
+          transform: 'scaleX(-1)',
+        }}
+      >
+        <defs>
+          <linearGradient id="bkni-gradient">
+            <stop offset="0%" stopColor={`var(--${bkniColor}-indicator)`} />
+            <stop offset="50%" stopColor={`var(--${bkniColor}-indicator)`} />
+            <stop
+              offset="100%"
+              stopColor={`var(--${lastBkniColor}-indicator)`}
+            />
+          </linearGradient>
+        </defs>
+
+        <circle
+          cx={90}
+          cy={90}
+          r={80}
+          strokeLinecap="round"
+          fill="none"
+          stroke="var(--color-panel-solid)"
+          strokeWidth={20}
+          strokeDasharray={80 * Math.PI}
+          strokeDashoffset={80 * Math.PI}
+        />
+        <circle
+          cx={90}
+          cy={90}
+          r={80}
+          strokeLinecap="round"
+          fill="none"
+          stroke="url(#bkni-gradient)"
+          strokeWidth={20}
+          strokeDasharray={(160 - 80 * bkniFraction) * Math.PI}
+          strokeDashoffset={(160 - 80 * bkniFraction) * Math.PI}
+        />
+      </svg>
+
+      <Flex direction="column" align="center" mt="-8">
+        <Text weight="bold" size="8">
+          {bkniMetric}
+        </Text>
+
+        <Popover.Root>
+          <Popover.Trigger>
+            <Button color="gray" size="2" variant="ghost">
+              <TimerIcon />
+              {strings.common.bkni_percentile[bkniPercentile]}
+            </Button>
+          </Popover.Trigger>
+
+          <Popover.Content align="center">
+            <Flex
+              direction="column"
+              style={{
+                width: 'fit-content',
+              }}
+            >
+              <Flex direction="column" mb="3">
+                <Heading weight="bold" size="5">
+                  BlitzKit Neutrality Index
+                </Heading>
+                <Text size="2" color="gray" wrap="wrap">
+                  A next generation performance metric
+                </Text>
+              </Flex>
+
+              {BKNI_PERCENTILES.map(({ percentile, min }, index) => (
+                <Button radius="none" color={BKNI_COLORS[percentile]}>
+                  <Flex align="center" justify="between" width="100%" gap="2">
+                    <Text>{strings.common.bkni_percentile[percentile]}</Text>
+                    <Text size="1">
+                      {min} - {BKNI_PERCENTILES[index + 1]?.min ?? 200}
+                    </Text>
+                  </Flex>
+                </Button>
+              ))}
+            </Flex>
+          </Popover.Content>
+        </Popover.Root>
+      </Flex>
+    </Flex>
+  );
+}

src/components/PageWrapper.tsx

@@ -4,7 +4,6 @@ import { ComponentProps } from 'react';
 type PageWrapperProps = FlexProps & {
   color?: ComponentProps<typeof Theme>['accentColor'];
   size?: number | string;
-  noPadding?: boolean;
   noMaxWidth?: boolean;
   containerProps?: ComponentProps<typeof Theme>;
   noFlex1?: boolean;
@@ -15,7 +14,6 @@ export default function PageWrapper({
   color,
   size = 800,
   children,
-  noPadding = false,
   noMaxWidth = false,
   noFlex1 = false,
   containerProps,
@@ -35,11 +33,11 @@ export default function PageWrapper({
       <Flex
         direction="column"
         gap="4"
+        p="4"
         style={{
           width: '100%',
           maxWidth: noMaxWidth ? undefined : size,
           margin: 'auto',
-          padding: noPadding ? 0 : 16,
           boxSizing: 'border-box',
           flex: 1,
           ...style,