feat: Add Button-component

Signed-off-by: Tim Hårek Andreassen <tim@harek.no>

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,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
+        <ButtonLink href={`podcast:${feedUrl.toString()}`} className="block">
-          className="block w-max bg-blue-100 text-black p-2 border-black border"
-          href={`podcast:${feedUrl.toString()}`}
-        >
           📻 Å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()}>

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;
+  copyText: string;
-  children: Preact.ComponentChildren;
+  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>
   );
 }