From e7b3bc9d1d7f4b429db6156748c7090efaef434d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yoannis=20S=C3=A1nchez=20Soto?= <yoannisgnw@gmail.com>
Date: Sat, 16 Nov 2024 09:36:42 -0500
Subject: [PATCH] Ad ads banner

---
 components/ads/ad-banner.tsx | 33 +++++++++++++++++++++++++++++++++
 components/editor.tsx        |  3 +++
 2 files changed, 36 insertions(+)
 create mode 100644 components/ads/ad-banner.tsx

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