feat: use native link

src/app/tools/tank-performance/components/Info.tsx

@@ -20,8 +20,12 @@ export function Info() {
         </Callout.Icon>
         <Callout.Text>
           Career stats based on {formatCompact(Math.round(samples))} players
-          with at least 5K career battles and 1 battle in the past 120 days;
-          updated daily.
+          with at least 5K career battles and 1 battle in the past 120 days.
+          Updated{' '}
+          {Math.floor(
+            (Date.now() - awaitedAverageDefinitions.time) / (1000 * 60 * 60),
+          )}{' '}
+          hours ago.
         </Callout.Text>
       </Callout.Root>
     </Flex>

src/app/tools/tankopedia/components/TankCard.css.ts

@@ -30,3 +30,12 @@ export const name = style({
   overflow: 'hidden',
   textOverflow: 'ellipsis',
 });
+
+export const link = style({
+  color: 'inherit',
+  textDecoration: 'none',
+
+  ':hover': {
+    textDecoration: 'underline',
+  },
+});

src/app/tools/tankopedia/components/TankCard.tsx

@@ -1,8 +1,8 @@
 import { Flex, Text } from '@radix-ui/themes';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
+import Link from 'next/link';
 import { use, useMemo } from 'react';
 import { classIcons } from '../../../../components/ClassIcon';
-import { Link } from '../../../../components/Link';
 import { resolveNearPenetration } from '../../../../core/blitz/resolveNearPenetration';
 import { asset } from '../../../../core/blitzkit/asset';
 import { modelDefinitions } from '../../../../core/blitzkit/modelDefinitions';
@@ -132,7 +132,7 @@ export function TankCard({ tank, onSelect }: TankCardProps) {
   }, [sortBy]);
 
   return (
-    <Link
+    <Text
       tabIndex={onSelect ? 0 : undefined}
       size="1"
       color={
@@ -143,44 +143,47 @@ export function TankCard({ tank, onSelect }: TankCardProps) {
             : 'gray'
       }
       highContrast={tank.treeType === 'researchable'}
-      underline="hover"
-      href={onSelect ? undefined : `/tools/tankopedia/${tank.id}`}
       onClick={onSelect ? () => onSelect(tank) : undefined}
       className={styles.card}
       style={assignInlineVars({
         [styles.cardBackgroundVar]: `top left / contain no-repeat url(${asset(`flags/scratched/${tank.nation}.webp`)})`,
       })}
     >
-      <img alt={tank.name} src={tankIcon(tank.id)} className={styles.image} />
-
-      <Flex
-        justify="center"
-        gap="1"
-        align="center"
-        overflow="hidden"
-        width="100%"
-        maxWidth="100%"
+      <Link
+        className={styles.link}
+        href={onSelect ? '#' : `/tools/tankopedia/${tank.id}`}
       >
-        <Icon className={styles.classIcon} />
-        <Text align="center" className={styles.name}>
-          {tank.name}
-        </Text>
-      </Flex>
+        <img alt={tank.name} src={tankIcon(tank.id)} className={styles.image} />
 
-      {discriminator && (
-        <Text
-          mt="-2"
-          color="gray"
+        <Flex
+          justify="center"
+          gap="1"
           align="center"
-          style={{
-            whiteSpace: 'nowrap',
-            overflow: 'hidden',
-            textOverflow: 'ellipsis',
-          }}
+          overflow="hidden"
+          width="100%"
+          maxWidth="100%"
         >
-          {discriminator}
-        </Text>
-      )}
-    </Link>
+          <Icon className={styles.classIcon} />
+          <Text align="center" className={styles.name}>
+            {tank.name}
+          </Text>
+        </Flex>
+
+        {discriminator && (
+          <Text
+            mt="-2"
+            color="gray"
+            align="center"
+            style={{
+              whiteSpace: 'nowrap',
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+            }}
+          >
+            {discriminator}
+          </Text>
+        )}
+      </Link>
+    </Text>
   );
 }

src/components/StickyTableRoot.tsx

@@ -4,7 +4,7 @@ import { Table } from '@radix-ui/themes';
 import { RootProps } from '@radix-ui/themes/dist/cjs/components/table';
 import { useEffect, useRef } from 'react';
 
-export function StickyTableRoot(props: RootProps) {
+export function StickyTableRoot({ style, ...props }: RootProps) {
   const table = useRef<HTMLTableElement>(null);
 
   useEffect(() => {
@@ -13,5 +13,11 @@ export function StickyTableRoot(props: RootProps) {
       ?.style.setProperty('overflow', 'auto');
   }, []);
 
-  return <Table.Root {...props} ref={table} />;
+  return (
+    <Table.Root
+      {...props}
+      ref={table}
+      style={{ overflow: 'hidden', ...style }}
+    />
+  );
 }