From ea70033b08c470673d08fe912638ec0f3f4bb4de Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com> Date: Mon, 14 Oct 2024 10:27:42 -0500 Subject: [PATCH] feat: report buttons --- packages/website/src/components/Ad.tsx | 49 ++----------------- .../src/components/AdResponsiveHorizontal.tsx | 7 +++ .../src/components/AdStickyTableRow.tsx | 4 +- .../src/components/TankSearch/index.tsx | 5 +- packages/website/src/pages/index.astro | 6 +-- .../pages/tools/tankopedia/[id]/_index.tsx | 10 ++-- 6 files changed, 23 insertions(+), 58 deletions(-) create mode 100644 packages/website/src/components/AdResponsiveHorizontal.tsx diff --git a/packages/website/src/components/Ad.tsx b/packages/website/src/components/Ad.tsx index e9ee197f2..d3323d033 100644 --- a/packages/website/src/components/Ad.tsx +++ b/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 { - Size728x90, - Size970x90, - Size970x250, - Size300x250, - Size336x280, - Size320x50, - Size320x100, - Size320x480, - Size160x600, - Size300x600, -} - -const MAX_AD_SIZES: Record = { - [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`); - +export function Ad({ id, ...props }: AdProps) { 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 ; } diff --git a/packages/website/src/components/AdResponsiveHorizontal.tsx b/packages/website/src/components/AdResponsiveHorizontal.tsx new file mode 100644 index 000000000..35d08aa7b --- /dev/null +++ b/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 ; +} diff --git a/packages/website/src/components/AdStickyTableRow.tsx b/packages/website/src/components/AdStickyTableRow.tsx index fe9f740b0..d5fcfe669 100644 --- a/packages/website/src/components/AdStickyTableRow.tsx +++ b/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" > - + diff --git a/packages/website/src/components/TankSearch/index.tsx b/packages/website/src/components/TankSearch/index.tsx index cce95105e..045ba389c 100644 --- a/packages/website/src/components/TankSearch/index.tsx +++ b/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( hasAd && index !== tanks.length - 1 && ( - diff --git a/packages/website/src/pages/index.astro b/packages/website/src/pages/index.astro index d3cdf1a03..a4103ba10 100644 --- a/packages/website/src/pages/index.astro +++ b/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'; - + @@ -42,7 +42,7 @@ import BaseLayout from '../layouts/BaseLayout.astro'; - + diff --git a/packages/website/src/pages/tools/tankopedia/[id]/_index.tsx b/packages/website/src/pages/tools/tankopedia/[id]/_index.tsx index 16d30e75b..5c0e90570 100644 --- a/packages/website/src/pages/tools/tankopedia/[id]/_index.tsx +++ b/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) { > - + - + - + - +