adjust carbon ad, place on podcast pages

Author: Alex Patterson

app/(main)/(podcast)/podcast/[slug]/page.tsx

@@ -21,6 +21,7 @@ import PlayerPlayButton from "@/components/player-play-button";
 import PodcastOpenSpotify from "@/components/podcast-open-spotify";
 import PodcastOpenApple from "@/components/podcast-open-apple";
 import PodcastOpenYouTube from "@/components/podcast-open-youtube";
+import CarbonAdBanner from "@/components/carbon-ad-banner";
 
 type Props = {
   params: { slug: string };
@@ -124,7 +125,7 @@ export default async function PodcastPage({ params }: Props) {
             </div>
           )}
         </div>
-        {podcast?.sponsor?.length && (
+        {podcast?.sponsor?.length ? (
           <section className="flex flex-col mt-10 mb-10">
             <h2 className="mb-4 text-2xl font-bold">Sponsors</h2>
             <hr className="border-accent-2" />
@@ -133,6 +134,8 @@ export default async function PodcastPage({ params }: Props) {
             </div>
             <hr className="border-accent-2" />
           </section>
+        ) : (
+          <CarbonAdBanner />
         )}
         {podcast?.content?.length && (
           <PortableText

components/carbon-ad-banner.tsx

@@ -12,5 +12,16 @@ export default function CarbonAdBanner() {
         s.src = `//cdn.carbonads.com/carbon.js?serve=CW7DCKJJ&placement=codingcatdev&format=cover`;
         reference.current.appendChild(s);
     }, []);
-    return <div className="flex justify-center my-2" ref={reference} />;
+    return (
+        <section className="flex flex-col mt-10 mb-10">
+            <h2 className="mb-4 text-2xl font-bold">Ads</h2>
+            <hr className="border-accent-2" />
+            <div className="my-12 ">
+                <div className="p-4 grid gap-6 md:p-6 grid-flow-col auto-cols-[1fr]">
+                    <div className="flex justify-center my-2" ref={reference} />
+                </div>
+            </div>
+            <hr className="border-accent-2" />
+        </section>
+    )
 }