feat: less cls ads

packages/website/src/components/Ad.tsx

@@ -1,17 +1,45 @@
 import { Box, type BoxProps } from '@radix-ui/themes';
 import { useEffect } from 'react';
-import { useAdExempt } from '../hooks/useAdExempt';
+import type { Vector2Tuple } from 'three';
 
 export type AdProps = BoxProps & {
   id: string;
+  commonHeight: 250;
 };
 
-export function Ad({ id, ...props }: AdProps) {
-  const exempt = useAdExempt();
+export enum MaxAdSize {
+  Size728x90,
+  Size970x90,
+  Size970x250,
+  Size300x250,
+  Size336x280,
+  Size320x50,
+  Size320x100,
+  Size320x480,
+  Size160x600,
+  Size300x600,
+}
+
+const MAX_AD_SIZES: Record<MaxAdSize, Vector2Tuple> = {
+  [MaxAdSize.Size728x90]: [728, 90],
+  [MaxAdSize.Size970x90]: [970, 90],
+  [MaxAdSize.Size970x250]: [970, 250],
+  [MaxAdSize.Size300x250]: [300, 250],
+  [MaxAdSize.Size336x280]: [336, 280],
+  [MaxAdSize.Size320x50]: [320, 50],
+  [MaxAdSize.Size320x100]: [320, 100],
+  [MaxAdSize.Size320x480]: [320, 480],
+  [MaxAdSize.Size160x600]: [160, 600],
+  [MaxAdSize.Size300x600]: [300, 600],
+};
+
+export function Ad({ id, commonHeight, ...props }: AdProps) {
+  // const [width, height] =
+  //   maxAdSize === undefined
+  //     ? [undefined, undefined]
+  //     : MAX_AD_SIZES[maxAdSize].map((dimension) => `${dimension}px`);
 
   useEffect(() => {
-    if (exempt) return;
-
     (window as any).nitroAds.createAd(id, {
       refreshTime: 30,
       demo: import.meta.env.MODE === 'development',
@@ -24,9 +52,14 @@ export function Ad({ id, ...props }: AdProps) {
         position: 'top-right',
       },
     });
-  }, [exempt, id]);
+  }, [id]);
 
-  if (exempt) return null;
-
-  return <Box id={id} width="100%" {...props} />;
+  return (
+    <Box
+      id={id}
+      width="100%"
+      height={commonHeight ? `${commonHeight}px` : 'auto'}
+      {...props}
+    />
+  );
 }

packages/website/src/components/Plugs.tsx

@@ -1,14 +1,6 @@
 import { assertSecret, patreonLoginUrl } from '@blitzkit/core';
 import { ArrowRightIcon } from '@radix-ui/react-icons';
-import {
-  Badge,
-  Button,
-  Code,
-  Flex,
-  Link,
-  Separator,
-  Text,
-} from '@radix-ui/themes';
+import { Button, Code, Flex, Link, Separator, Text } from '@radix-ui/themes';
 import { useAdExempt } from '../hooks/useAdExempt';
 import { App } from '../stores/app';
 import { PatreonIcon } from './PatreonIcon';
@@ -38,16 +30,13 @@ function Content() {
         assertSecret(import.meta.env.PUBLIC_ASSET_BRANCH) !== 'opentest' && (
           <>
             <Flex direction="column" gap="3" align="center">
-              <Flex align="center" gap="2">
-                <Badge color="green">NEW</Badge>
-                <Text size="5">
-                  BlitzKit{' '}
-                  <Code variant="outline" size="4" color="gray" highContrast>
-                    opentest
-                  </Code>{' '}
-                  is available now{' '}
-                </Text>
-              </Flex>
+              <Text size="5">
+                BlitzKit{' '}
+                <Code variant="outline" size="4" color="gray" highContrast>
+                  opentest
+                </Code>{' '}
+                is available now{' '}
+              </Text>
 
               <Link href="https://opentest.blitzkit.app/" target="_blank">
                 <Button color="green">

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

@@ -10,14 +10,7 @@ import {
   type TankDefinition,
 } from '@blitzkit/core';
 import { useStore } from '@nanostores/react';
-import {
-  Box,
-  Callout,
-  Flex,
-  Link,
-  Text,
-  type FlexProps,
-} from '@radix-ui/themes';
+import { Callout, Flex, Link, Text, type FlexProps } from '@radix-ui/themes';
 import fuzzysort from 'fuzzysort';
 import { times } from 'lodash-es';
 import { Fragment, memo, useEffect, useMemo, useState } from 'react';
@@ -481,11 +474,12 @@ export const TankSearch = memo<TankSearchProps>(
                         !compact &&
                         hasAd &&
                         index !== tanks.length - 1 && (
-                          <Box gridColumn="1 / -1">
+                          <Flex gridColumn="1 / -1">
                             <Ad
+                              commonHeight={250}
                               id={`tankopedia-search-ad-${Math.floor(index / 32)}`}
                             />
-                          </Box>
+                          </Flex>
                         )}
                     </Fragment>
                   );