feat: Add open in podcast app button (and minor stuff) (#29)

components/Button.tsx

@@ -0,0 +1,31 @@
+import { ComponentChildren, JSX } from "preact";
+
+type ButtonProps = {
+  children: ComponentChildren;
+} & JSX.HTMLAttributes<HTMLButtonElement>;
+
+const className = "p-2 border(gray-100 2) hover:bg-gray-200 bg-blue-200 w-max font-medium";
+
+export function Button(props: ButtonProps) {
+  const { children, className: additionalClass = "", ...buttonProps } = props;
+
+  return (
+    <button className={`${className} ${additionalClass}`} {...buttonProps}>
+      {children}
+    </button>
+  );
+}
+
+type AnchorProps = {
+  children: ComponentChildren;
+} & JSX.HTMLAttributes<HTMLAnchorElement>;
+
+export function ButtonLink(props: AnchorProps) {
+  const { children, className: additionalClass = "", ...linkProps } = props;
+
+  return (
+    <a className={`${className} ${additionalClass}`} {...linkProps}>
+      {children}
+    </a>
+  );
+}

components/SeriesCard.tsx

@@ -1,5 +1,7 @@
 import CopyButton from "../islands/CopyButton.tsx";
 import { SearchResult } from "../lib/nrk/nrk.ts";
+import { ButtonLink } from "./Button.tsx";
+import IconPodcast from "https://deno.land/x/tabler_icons_tsx@0.0.5/tsx/brand-apple-podcast.tsx";
 
 export default function SeriesCard(props: { serie: SearchResult; origin: string }) {
   const feedUrl = new URL(`/api/feeds/${props.serie.seriesId}`, props.origin);
@@ -10,10 +12,17 @@ export default function SeriesCard(props: { serie: SearchResult; origin: string
         <h3 className="text-xl font-semibold">{props.serie.title}</h3>
         <p className="text-md">{props.serie.description}</p>
         <img src={image.uri} width={image.width} alt="" />
-        <code className="font-mono bg-black text-white select-all p-2">{feedUrl.toString()}</code>
-        <CopyButton text={feedUrl.toString()}>
-          Kopier URL
-        </CopyButton>
+        <ButtonLink href={`podcast:${feedUrl.toString()}`} className="block flex items-center gap-2">
+          <IconPodcast /> Åpne i din podkast-app
+        </ButtonLink>
+        <div className="w-full flex">
+          <CopyButton copyText={feedUrl.toString()} className="whitespace-nowrap flex items-center gap-2">
+            Kopier URL
+          </CopyButton>
+          <pre className="w-full font-mono bg-black text-white select-all p-2 overflow-x-auto">
+            {feedUrl.toString()}
+          </pre>
+        </div>
       </div>
     </div>
   );

islands/CopyButton.tsx

@@ -1,14 +1,19 @@
-import Preact from "preact";
+import { ComponentChildren, JSX } from "preact";
 import { useState } from "preact/hooks";
 import { IS_BROWSER } from "$fresh/runtime.ts";
+import { Button } from "../components/Button.tsx";
+import IconCopy from "https://deno.land/x/tabler_icons_tsx@0.0.5/tsx/copy.tsx";
+// BUG: We have to use the GitHub URL until they resolve the issue: https://github.com/hashrock/tabler-icons-tsx/issues/16
+import IconCopyCheck from "https://raw.githubusercontent.com/hashrock/tabler-icons-tsx/df5d89c516984fde5c8ec8a382a1348f9fa1aee6/tsx/copy-check.tsx";
 
 type Props = {
-  text: string;
-  children: Preact.ComponentChildren;
+  copyText: string;
+  children: ComponentChildren;
   disabled?: boolean;
-};
+} & JSX.HTMLAttributes<HTMLButtonElement>;
 
-export default function CopyButton({ text, disabled = false, children }: Props) {
+export default function CopyButton(props: Props) {
+  const { copyText, disabled = false, children, className = "", ...buttonProps } = props;
   const [clicked, setClicked] = useState(false);
 
   const startReset = () => {
@@ -18,16 +23,27 @@ export default function CopyButton({ text, disabled = false, children }: Props)
   };
 
   return (
-    <button
+    <Button
       onClick={() => {
-        navigator.clipboard.writeText(text.toString());
+        navigator.clipboard.writeText(copyText.toString());
         setClicked(true);
         startReset();
       }}
       disabled={!IS_BROWSER || disabled}
-      class="px-2 py-1 border(gray-100 2) hover:bg-gray-200 mx-auto bg-blue-200"
+      className={`${className} ${clicked ? "bg-green-500" : ""}`}
+      {...buttonProps}
     >
-      {clicked ? "Kopiert!" : children}
-    </button>
+      {clicked
+        ? (
+          <>
+            <IconCopyCheck /> Kopiert!
+          </>
+        )
+        : (
+          <>
+            <IconCopy /> {children}
+          </>
+        )}
+    </Button>
   );
 }