Ad ads banner

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<any>()
+
+  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 (
+    <div
+      className="mx-2 my-5 items-center justify-center border border-gray-200 text-center text-white"
+      ref={banner}
+    ></div>
+  )
+}

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
                 </p>
               )}
+
+              <AdBanner></AdBanner>
             </div>
 
             {/* Image Queue */}