feat: flipped tabs

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

@@ -0,0 +1,16 @@
+import { Tabs, Text } from '@radix-ui/themes';
+import { TriggerProps } from '@radix-ui/themes/dist/cjs/components/tabs';
+
+export function FlippedTrigger({ children, ...props }: TriggerProps) {
+  return (
+    <Tabs.Trigger {...props}>
+      <Text
+        style={{
+          transform: 'scaleY(-1)',
+        }}
+      >
+        {children}
+      </Text>
+    </Tabs.Trigger>
+  );
+}

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

@@ -1,36 +1,80 @@
-import { Box, Flex, Heading, Text } from '@radix-ui/themes';
+'use client';
+
+import { ExclamationTriangleIcon } from '@radix-ui/react-icons';
+import { Box, Callout, Flex, Heading, Tabs, Text } from '@radix-ui/themes';
+import { use, useMemo, useState } from 'react';
 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 { parseBkni } from '../../../../core/blitzkit/parseBkni';
 import strings from '../../../../lang/en-US.json';
+import { FlippedTrigger } from './components/FlippedTrigger';
 
-export default async function Page({ params }: { params: { id: string } }) {
+export default function Page({ params }: { params: { id: string } }) {
   const id = parseInt(params.id);
   const region = idToRegion(id);
-  const accountInfo = await getAccountInfo(region, id);
-  const clanAccountInfo = await getClanAccountInfo(region, id, ['clan']);
-  const bkni = Math.random() * 2 - 1;
+  const accountInfoPromise = useMemo(() => getAccountInfo(region, id), [id]);
+  const accountInfo = use(accountInfoPromise);
+  const clanAccountInfoPromise = useMemo(
+    () => getClanAccountInfo(region, id, ['clan']),
+    [id],
+  );
+  const clanAccountInfo = use(clanAccountInfoPromise);
+  // const bkni = Math.random() * 2 - 1;
+  const bkni = 0.87;
+  const [period, setPeriod] = useState<'custom' | number>(30);
+  const { bkniColor } = parseBkni(bkni);
+  const isTracking = false;
 
   return (
     <>
       <PageWrapper
-        py="8"
-        color="blue"
+        p={{
+          initial: '6',
+          md: '8',
+        }}
+        size={1024}
+        noFlex1
+        color={bkniColor}
         containerProps={{
           style: {
-            backgroundColor: 'var(--color-surface)',
+            background: `linear-gradient(var(--${bkniColor}-a2), var(--${bkniColor}-a1))`,
           },
         }}
       >
-        <Flex justify="between" align="center">
-          <Flex direction="column">
-            <Heading size="8">{accountInfo.nickname} </Heading>
+        <Flex
+          justify="between"
+          align="center"
+          direction={{
+            initial: 'column-reverse',
+            md: 'row',
+          }}
+          gap={{
+            initial: '8',
+            md: '4',
+          }}
+        >
+          <Flex
+            direction="column"
+            align={{
+              initial: 'center',
+              md: 'start',
+            }}
+          >
+            <Heading
+              size={{
+                initial: '7',
+                xs: '8',
+              }}
+            >
+              {accountInfo.nickname}
+            </Heading>
 
             <Text color="gray">
               {clanAccountInfo?.clan && `[${clanAccountInfo.clan.tag}] • `}
-              {strings.common.regions.normal[region]}
+              {strings.common.regions.short[region]}
             </Text>
           </Flex>
 
@@ -38,7 +82,40 @@ export default async function Page({ params }: { params: { id: string } }) {
         </Flex>
       </PageWrapper>
 
-      <Box flexGrow="1" />
+      <PageWrapper color={bkniColor} noFlex1 pt="0" align="center">
+        <Tabs.Root
+          style={{
+            transform: 'scaleY(-1)',
+          }}
+          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>
+      </PageWrapper>
+
+      {!isTracking && (
+        <Flex flexGrow="1" justify="center" align="center" p="4">
+          <Callout.Root color="red" mt="4">
+            <Callout.Icon>
+              <ExclamationTriangleIcon />
+            </Callout.Icon>
+            <Callout.Text>
+              We haven't tracked long enough to provide statistics. Please check
+              back after a few days.
+            </Callout.Text>
+          </Callout.Root>
+        </Flex>
+      )}
+
+      {isTracking && <Box flexGrow="1" />}
     </>
   );
 }