Add podcasting service links + download link

Ohlasy · Jan 3, 2025 · a1dfdb7 · a1dfdb7
1 parent c540ecb
commit a1dfdb7
Showing 1 changed file with 19 additions and 1 deletion.
diff --git a/app/clanky/[...path]/PodcastPlayer.tsx b/app/clanky/[...path]/PodcastPlayer.tsx
@@ -4,6 +4,7 @@ import Image from "next/image";
 import Plausible from "plausible-tracker";
 import { useRef, useState } from "react";
 import { PodcastEpisode } from "src/data/podcast";
+import { RouteTo } from "src/routing";
 import { tilde } from "src/utils";
 
 type PodcastPlayerProps = {
@@ -16,7 +17,7 @@ export const PodcastPlayer = ({ episode }: PodcastPlayerProps) => {
   const { trackEvent } = Plausible({ domain: "ohlasy.info" });
 
   return (
-    <div className="bg-plum rounded-xl p-7 md:p-9 my-6">
+    <div className="bg-plum rounded-xl p-7 md:p-9 my-6 flex flex-col gap-7">
       <audio
         src={episode.url}
         ref={playerRef}
@@ -58,10 +59,27 @@ export const PodcastPlayer = ({ episode }: PodcastPlayerProps) => {
           </div>
         </div>
       </div>
+      <div className="flex flex-row flex-wrap gap-4 text-sm -mb-2">
+        <ServiceButton href={RouteTo.Spotify} title="Spotify" />
+        <ServiceButton href={RouteTo.ApplePodcasts} title="Apple Podcasts" />
+        <ServiceButton href={RouteTo.YouTubePodcast} title="YouTube" />
+        <ServiceButton href={RouteTo.mainPodcastFeed} title="RSS" />
+        <ServiceButton href={episode.url} title="stáhnout MP3" />
+      </div>
     </div>
   );
 };
 
+const ServiceButton = ({ href, title }: { href: string; title: string }) => (
+  <a
+    href={href}
+    className="rounded-full whitespace-nowrap border-[1px] text-white border-white px-2 hover:bg-white hover:text-plum"
+    target="_blank"
+  >
+    ▷ {title}
+  </a>
+);
+
 const Button = ({
   onClick,
   icon,