From ff98736a8e21a2545a96a9f7c21dbd1eb7e2ff23 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20H=C3=A5rek=20Andreassen?= <tim@harek.no>
Date: Fri, 12 Apr 2024 11:26:38 +0200
Subject: [PATCH] feat: Add Button-component
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Tim Hårek Andreassen <tim@harek.no>
---
 components/Button.tsx     | 31 +++++++++++++++++++++++++++++++
 components/SeriesCard.tsx |  8 +++-----
 islands/CopyButton.tsx    | 20 +++++++++++---------
 3 files changed, 45 insertions(+), 14 deletions(-)
 create mode 100644 components/Button.tsx

diff --git a/components/Button.tsx b/components/Button.tsx
new file mode 100644
index 0000000..28d4ad6
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/components/SeriesCard.tsx b/components/SeriesCard.tsx
index 34e7bdf..ea45fbc 100644
--- a/components/SeriesCard.tsx
+++ b/components/SeriesCard.tsx
@@ -1,5 +1,6 @@
 import CopyButton from "../islands/CopyButton.tsx";
 import { SearchResult } from "../lib/nrk/nrk.ts";
+import { ButtonLink } from "./Button.tsx";
 
 export default function SeriesCard(props: { serie: SearchResult; origin: string }) {
   const feedUrl = new URL(`/api/feeds/${props.serie.seriesId}`, props.origin);
@@ -10,12 +11,9 @@ 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="" />
-        <a
-          className="block w-max bg-blue-100 text-black p-2 border-black border"
-          href={`podcast:${feedUrl.toString()}`}
-        >
+        <ButtonLink href={`podcast:${feedUrl.toString()}`} className="block">
           📻 Åpne i din podkast-app
-        </a>
+        </ButtonLink>
         <div className="">
           <code className="font-mono bg-black text-white select-all p-2">{feedUrl.toString()}</code>
           <CopyButton text={feedUrl.toString()}>
diff --git a/islands/CopyButton.tsx b/islands/CopyButton.tsx
index 759c2ef..8ad976c 100644
--- a/islands/CopyButton.tsx
+++ b/islands/CopyButton.tsx
@@ -1,14 +1,16 @@
-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";
 
 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, ...buttonProps } = props;
   const [clicked, setClicked] = useState(false);
 
   const startReset = () => {
@@ -18,16 +20,16 @@ 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"
+      {...buttonProps}
     >
       {clicked ? "Kopiert!" : children}
-    </button>
+    </Button>
   );
 }