diff --git a/components/ads/ad-banner.tsx b/components/ads/ad-banner.tsx new file mode 100644 index 0000000..8de12a7 --- /dev/null +++ b/components/ads/ad-banner.tsx @@ -0,0 +1,33 @@ +/* eslint-disable react-hooks/exhaustive-deps */ +import { useEffect, useRef } from "react" + +export default function AdBanner(): JSX.Element { + const banner = useRef() + + const atOptions = { + key: "ad8e08e8947b794a1a802eaab7d7cbf7", + format: "iframe", + height: 600, + width: 160, + params: {}, + } + useEffect(() => { + if (banner.current && !banner.current.firstChild) { + const conf = document.createElement("script") + const script = document.createElement("script") + script.type = "text/javascript" + script.src = `//www.highperformancedformats.com/${atOptions.key}/invoke.js` + conf.innerHTML = `atOptions = ${JSON.stringify(atOptions)}` + + banner.current.append(conf) + banner.current.append(script) + } + }, [banner]) + + return ( +
+ ) +} diff --git a/components/editor.tsx b/components/editor.tsx index aaed645..12de986 100644 --- a/components/editor.tsx +++ b/components/editor.tsx @@ -42,6 +42,7 @@ import { Progress } from "@/components/ui/progress" import { Icons } from "@/components/icons" import { Loader } from "@/components/loader" +import AdBanner from "./ads/ad-banner" import ImageSettings from "./settings/ImageSettings" import { ThemeToggle } from "./theme-toggle" @@ -404,6 +405,8 @@ export const Editor = () => { Select an image to edit

)} + + {/* Image Queue */}