add podmatch

Author: codercatdev

app/(main)/(podcast)/podcast/Podcast.tsx

@@ -17,6 +17,7 @@ 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";
+import PodmatchBadge from "@/components/podmatch-badge";
 
 export default async function Podcast({ podcast }: { podcast: NonNullable<PodcastQueryResult> }) {
 
@@ -70,7 +71,10 @@ export default async function Podcast({ podcast }: { podcast: NonNullable<Podcas
                                 <DateComponent dateString={podcast.date} />
                             </div>
                         </div>
-                        <CarbonAdBanner />
+                        <div className="flex m-2 md:m-8 justify-center">
+
+                            <PodmatchBadge />
+                        </div>
                     </div>
 
                     {src && (
@@ -98,14 +102,18 @@ export default async function Podcast({ podcast }: { podcast: NonNullable<Podcas
                         <hr className="border-accent-2" />
                     </section>
                 )}
-
-                {podcast?.content?.length && (
-                    <PortableText
-                        className="mx-auto prose-violet lg:prose-xl dark:prose-invert"
-                        value={podcast.content as PortableTextBlock[]}
-                    />
-                )}
+                <div className="my-2 md:my-8">
+                    {podcast?.content?.length && (
+                        <PortableText
+                            className="mx-auto prose-violet lg:prose-xl dark:prose-invert"
+                            value={podcast.content as PortableTextBlock[]}
+                        />
+                    )}
+                </div>
             </article>
+            <div className="flex m-2 md:m-8 justify-center">
+                <PodmatchBadge />
+            </div>
             {podcast?.pick?.length && (
                 <>
                     <hr className="mb-8 sm:mb-24 border-accent-2 mt-8 sm:mt-28" />

app/(main)/(podcast)/podcasts/page.tsx

@@ -14,6 +14,7 @@ import { Button } from "@/components/ui/button";
 import { Separator } from "@/components/ui/separator";
 import MoreHeader from "@/components/more-header";
 import CarbonAdBanner from "@/components/carbon-ad-banner";
+import PodmatchBadge from "@/components/podmatch-badge";
 
 function HeroPodcast({
 	title,
@@ -99,6 +100,9 @@ export default async function Page() {
 				<Onboarding />
 			)}
 			<CarbonAdBanner />
+			<div className="flex m-2 md:m-8 justify-center">
+				<PodmatchBadge />
+			</div>
 			{heroPost?._id && (
 				<aside>
 					<MoreHeader title="Latest Podcasts" href="/podcasts/page/1" />

components/podmatch-badge.tsx

@@ -0,0 +1,75 @@
+'use client';
+
+export default function PodmatchBadge() {
+  return (
+    <div style={{ minWidth: 160, maxWidth: 400 }}>
+      <a
+        href="https://www.podmatch.com/member/codingcatdev"
+        style={{ textDecoration: "none", color: "inherit", display: "block" }}
+        target="_blank"
+      >
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+            padding: 15,
+            overflow: "hidden",
+            border: "solid 1px #ccc",
+            borderRadius: 10,
+          }}
+        >
+          <div
+            style={{
+              flexShrink: 0,
+              marginRight: 15,
+              padding: 0,
+              background: "none",
+            }}
+          >
+            <img
+              onError={(e) => {
+                const target = e.target as HTMLImageElement;
+                target.src = "https://podmatch.com/assets/img/waveform_img.png";
+              }}
+              alt="Cover Art"
+              style={{ height: 85 }}
+              src="https://img.rephonic.com/artwork/purrfectdev.jpg?width=600&height=600&quality=95"
+            />
+          </div>
+          <div
+            style={{
+              whiteSpace: "nowrap",
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+              textAlign: "left",
+            }}
+          >
+            <span style={{ display: "block", marginBottom: 3 }}>
+              <img
+                src="https://podmatch.com/assets/img/PodMatch_Logo.png"
+                alt="PodMatch Logo"
+                style={{ width: 80 }}
+              />
+            </span>
+            <span
+              style={{
+                display: "block",
+                fontSize: 16,
+                fontWeight: 600,
+                marginBottom: 2,
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+              }}
+            >
+              CodingCat.dev Podcast
+            </span>
+            <span style={{ display: "block", fontSize: 12, marginBottom: 2 }}>
+              <u>Become a guest</u> on my podcast
+            </span>
+            <span style={{ marginRight: 10, fontSize: 11 }}></span>
+          </div>
+        </div>
+      </a>
+    </div>
+  );
+}