feat: compare in-table ads

packages/website/src/components/Ad.tsx

@@ -58,6 +58,7 @@ export function Ad({ id, commonHeight, ...props }: AdProps) {
     <Box
       id={id}
       width="100%"
+      className="ad-container"
       height={commonHeight ? `${commonHeight}px` : 'auto'}
       {...props}
     />

packages/website/src/components/AdStickyTableRow.tsx

@@ -0,0 +1,24 @@
+import { Flex, Table } from '@radix-ui/themes';
+import { Ad } from './Ad';
+
+interface AdStickyTableRowProps {
+  id: string;
+}
+
+export function AdStickyTableRow({ id }: AdStickyTableRowProps) {
+  return (
+    <Table.Body style={{ height: 250 }}>
+      <Table.Row align="center">
+        <Flex
+          justify="center"
+          align="center"
+          position="absolute"
+          width="100%"
+          left="0"
+        >
+          <Ad commonHeight={250} id={id} />
+        </Flex>
+      </Table.Row>
+    </Table.Body>
+  );
+}

packages/website/src/components/Compare/Body.tsx

@@ -2,6 +2,7 @@ import { asset } from '@blitzkit/core';
 import { Flex, Heading, IconButton, Table } from '@radix-ui/themes';
 import type { TankCharacteristics } from '../../core/blitzkit/tankCharacteristics';
 import { CompareEphemeral } from '../../stores/compareEphemeral';
+import { AdStickyTableRow } from '../AdStickyTableRow';
 import { StickyColumnHeaderCell } from '../StickyColumnHeaderCell';
 import { CompareRow } from './CompareRow';
 import { CompareSectionTitle } from './CompareSectionTitle';
@@ -74,6 +75,9 @@ export function Body({ stats }: BodyProps) {
           ))}
         </Table.Row>
       </Table.Header>
+
+      <AdStickyTableRow id="compare-1" />
+
       <Table.Body>
         <CompareRow stats={stats} name="DPM" value="dpm" decimals={0} />
         <CompareRow
@@ -219,6 +223,8 @@ export function Body({ stats }: BodyProps) {
         />
       </Table.Body>
 
+      <AdStickyTableRow id="compare-2" />
+
       <CompareSectionTitle>Maneuverability</CompareSectionTitle>
       <Table.Body>
         <CompareRow
@@ -329,6 +335,8 @@ export function Body({ stats }: BodyProps) {
         />
       </Table.Body>
 
+      <AdStickyTableRow id="compare-3" />
+
       <CompareSectionTitle>Survivability</CompareSectionTitle>
       <Table.Body>
         <CompareRow stats={stats} name="Health" value="health" decimals={0} />

packages/website/src/components/Compare/CompareTable.tsx

@@ -45,7 +45,10 @@ export function CompareTable({ stats }: CompareTableProps) {
     <StickyTableRoot
       size="1"
       variant="surface"
-      style={{ maxWidth: '100%', height: 'calc(100vh - 128px)' }}
+      style={{
+        maxWidth: '100%',
+        // height: 'calc(100vh - 128px)'
+      }}
     >
       <Table.Header>
         <Table.Row>

packages/website/src/components/TankSearch/index.tsx

@@ -477,7 +477,7 @@ export const TankSearch = memo<TankSearchProps>(
                           <Flex gridColumn="1 / -1">
                             <Ad
                               commonHeight={250}
-                              id={`tankopedia-search-ad-${Math.floor(index / 32)}`}
+                              id={`tankopedia-search-${Math.floor(index / 32)}`}
                             />
                           </Flex>
                         )}