feat: report buttons

packages/website/src/components/Ad.tsx

@@ -1,44 +1,11 @@
 import { Box, type BoxProps } from '@radix-ui/themes';
 import { useEffect } from 'react';
-import type { Vector2Tuple } from 'three';
 
 export type AdProps = BoxProps & {
   id: string;
-  commonHeight: 250;
 };
 
-export enum MaxAdSize {
+export function Ad({ id, ...props }: AdProps) {
-  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(() => {
     (window as any).nitroAds.createAd(id, {
       refreshTime: 30,
@@ -46,21 +13,13 @@ export function Ad({ id, commonHeight, ...props }: AdProps) {
       renderVisibleOnly: true,
       delayLoading: true,
       report: {
-        enabled: false,
+        enabled: true,
         icon: true,
         wording: 'Report Ad',
-        position: 'top-right',
+        position: 'top-right-side',
       },
     });
   }, [id]);
 
-  return (
+  return <Box id={id} className="ad-container" {...props} />;
-    <Box
-      id={id}
-      width="100%"
-      className="ad-container"
-      height={commonHeight ? `${commonHeight}px` : 'auto'}
-      {...props}
-    />
-  );
 }

packages/website/src/components/AdResponsiveHorizontal.tsx

@@ -0,0 +1,7 @@
+import { Ad, type AdProps } from './Ad';
+
+type AdResponsiveHorizontal = AdProps;
+
+export function AdResponsiveHorizontal(props: AdResponsiveHorizontal) {
+  return <Ad height="250px" width="100%" {...props} />;
+}

packages/website/src/components/AdStickyTableRow.tsx

@@ -1,5 +1,5 @@
 import { Flex, Table } from '@radix-ui/themes';
-import { Ad } from './Ad';
+import { AdResponsiveHorizontal } from './AdResponsiveHorizontal';
 
 interface AdStickyTableRowProps {
   id: string;
@@ -16,7 +16,7 @@ export function AdStickyTableRow({ id }: AdStickyTableRowProps) {
           width="100%"
           left="0"
         >
-          <Ad commonHeight={250} id={id} />
+          <AdResponsiveHorizontal id={id} />
         </Flex>
       </Table.Row>
     </Table.Body>

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

@@ -23,7 +23,7 @@ import {
   SORT_UNITS,
 } from '../../stores/tankopediaPersistent/constants';
 import { $tankopediaSort } from '../../stores/tankopediaSort';
-import { Ad } from '../Ad';
+import { AdResponsiveHorizontal } from '../AdResponsiveHorizontal';
 import { ExperimentIcon } from '../ExperimentIcon';
 import { FilterControl } from './components/FilterControl';
 import { NoResults } from './components/NoResults';
@@ -476,8 +476,7 @@ export const TankSearch = memo<TankSearchProps>(
                         hasAd &&
                         index !== tanks.length - 1 && (
                           <Flex gridColumn="1 / -1">
-                            <Ad
+                            <AdResponsiveHorizontal
-                              commonHeight={250}
                               id={`tankopedia-search-${adId}`}
                             />
                           </Flex>

packages/website/src/pages/index.astro

@@ -1,6 +1,6 @@
 ---
 import { Box, Flex, Heading } from '@radix-ui/themes';
-import { Ad } from '../components/Ad.tsx';
+import { AdResponsiveHorizontal } from '../components/AdResponsiveHorizontal';
 import HomeHero from '../components/HomeHero.astro';
 import { Plugs } from '../components/Plugs.tsx';
 import ToolCard from '../components/ToolCard.astro';
@@ -25,7 +25,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
       <ToolCard tool={tankopediaTool} />
 
       <Flex justify="center">
-        <Ad client:idle id="homepage-1" commonHeight={250} />
+        <AdResponsiveHorizontal client:idle id="homepage-1" />
       </Flex>
 
       <Flex gap="4" direction={{ initial: 'column', sm: 'row' }}>
@@ -42,7 +42,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
       </Flex>
 
       <Flex justify="center">
-        <Ad client:idle id="homepage-2" commonHeight={250} />
+        <AdResponsiveHorizontal client:idle id="homepage-2" />
       </Flex>
 
       <Flex gap="4" direction={{ initial: 'column', sm: 'row' }}>

packages/website/src/pages/tools/tankopedia/[id]/_index.tsx

@@ -3,7 +3,7 @@ import {
   fetchProvisionDefinitions,
   fetchTankDefinitions,
 } from '@blitzkit/core';
-import { Ad } from '../../../../components/Ad';
+import { AdResponsiveHorizontal } from '../../../../components/AdResponsiveHorizontal';
 import { PageWrapper } from '../../../../components/PageWrapper';
 import { CalloutsSection } from '../../../../components/Tankopedia/CalloutsSection';
 import { CharacteristicsSection } from '../../../../components/Tankopedia/CharacteristicsSection';
@@ -48,16 +48,16 @@ export function Page({ id }: PageProps) {
             >
               <HeroSection />
               <ShotDisplaySection />
-              <Ad id="tankopedia-1" commonHeight={250} />
+              <AdResponsiveHorizontal id="tankopedia-1" />
               <CalloutsSection />
               <MetaSection />
               <TechTreeSection />
-              <Ad id="tankopedia-2" commonHeight={250} />
+              <AdResponsiveHorizontal id="tankopedia-2" />
               <CharacteristicsSection />
-              <Ad id="tankopedia-3" commonHeight={250} />
+              <AdResponsiveHorizontal id="tankopedia-3" />
               <GameModeSection />
               <VideoSection />
-              <Ad id="tankopedia-4" commonHeight={250} />
+              <AdResponsiveHorizontal id="tankopedia-4" />
               <HistorySection />
             </PageWrapper>
           </Duel.Provider>