add buttons

Author: Alex Patterson

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

@@ -18,6 +18,9 @@ import SponsorCard from "@/components/sponsor-card";
 import Avatar from "@/components/avatar";
 import Picks from "./picks";
 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";
 
 type Props = {
   params: { slug: string };
@@ -109,8 +112,15 @@ export default async function PodcastPage({ params }: Props) {
             <DateComponent dateString={podcast.date} />
           </div>
           {src && (
-            <div className="flex justify-start flex-wrap w-full">
+            <div className="flex flex-col sm:flex-row justify-start flex-wrap w-full p-2 sm:p-4 border border-foreground gap-2 sm:gap-4 items-center">
+              <h2 className="text-xl font-bold w-full text-center sm:text-start">Listening Options</h2>
               <PlayerPlayButton podcast={podcast} />
+              <span className="text-xl">or</span>
+              <div className="flex gap-1">
+                <PodcastOpenSpotify podcast={podcast} />
+                <PodcastOpenApple />
+                <PodcastOpenYouTube podcast={podcast} />
+              </div>
             </div>
           )}
         </div>

components/player-play-button.tsx

@@ -22,15 +22,15 @@ export default function PlayerPlayButton({ podcast }: { podcast: NonNullable<Pod
     return (
         <>
             {currentPodcast?._id === podcast?._id && audio?.isPlaying ? (
-                <Button variant="ghost" onClick={() => audioRef.current?.pause()} className="flex gap-2">
+                <Button variant="default" onClick={() => audioRef.current?.pause()} className="flex gap-2">
                     <FaCirclePause className="h-5 w-5" />
-                    <div className="text-xl">Play Episode</div>
+                    <div className="text-xl">Pause Episode</div>
                 </Button>
             ) :
                 (
-                    <Button variant="ghost" onClick={setCurrent} className="flex gap-2">
+                    <Button variant="default" onClick={setCurrent} className="flex gap-2">
                         <FaPlay className="h-5 w-5" />
-                        <div className="text-xl">Pause Episode</div>
+                        <div className="text-xl">Play Episode</div>
                     </Button>
                 )
             }

components/podcast-open-apple.tsx

@@ -0,0 +1,20 @@
+"use client"
+import { Button } from "@/components/ui/button"
+import { PodcastQueryResult } from "@/sanity.types";
+import Link from "next/link";
+import { SiApplepodcasts } from "react-icons/si";
+
+export default function PodcastOpenApple() {
+    return (
+        <Button variant="ghost" className="flex gap-2" asChild>
+            <Link
+                href={`https://podcasts.apple.com/us/podcast/codingcat-dev-podcast/id1491655542`}
+                target="_blank"
+                rel="noreferrer"
+                aria-label="Listen on Spotify"
+            >
+                <SiApplepodcasts className="h-5 w-5" />
+            </Link>
+        </Button>
+    )
+}

components/podcast-open-spotify.tsx

@@ -0,0 +1,24 @@
+"use client"
+import { Button } from "@/components/ui/button"
+import { FaSpotify } from "react-icons/fa6";
+import { PodcastQueryResult } from "@/sanity.types";
+import Link from "next/link";
+
+export default function PodcastOpenSpotify({ podcast }: { podcast: NonNullable<PodcastQueryResult> }) {
+    return (
+        <>
+            {podcast?._id && (
+                <Button variant="ghost" className="flex gap-2" asChild>
+                    <Link
+                        href={`https://open.spotify.com/search/codingcat.dev%20${encodeURIComponent(podcast.title)}/episodes`}
+                        target="_blank"
+                        rel="noreferrer"
+                        aria-label="Listen on Spotify"
+                    >
+                        <FaSpotify className="h-5 w-5" />
+                    </Link>
+                </Button>
+            )}
+        </>
+    )
+}

components/podcast-open-youtube.tsx

@@ -0,0 +1,24 @@
+"use client"
+import { Button } from "@/components/ui/button"
+import { FaYoutube } from "react-icons/fa6";
+import { PodcastQueryResult } from "@/sanity.types";
+import Link from "next/link";
+
+export default function PodcastOpenYouTube({ podcast }: { podcast: NonNullable<PodcastQueryResult> }) {
+    return (
+        <>
+            {podcast?.youtube && (
+                <Button variant="ghost" className="flex gap-2" asChild>
+                    <Link
+                        href={podcast.youtube}
+                        target="_blank"
+                        rel="noreferrer"
+                        aria-label="Listen on Spotify"
+                    >
+                        <FaYoutube className="h-5 w-5" />
+                    </Link>
+                </Button>
+            )}
+        </>
+    )
+}