same buttons everywhere.

src/adapters/playArrayBuffer/playArrayBuffer.manual-test.tsx

@@ -1,9 +1,12 @@
 import fixture from "./playArrayBuffer.fixture.mp3?url";
 import { playArrayBuffer } from "./playArrayBuffer";
 import { type Component, createResource, createSignal } from "solid-js";
+import { SimpleButton } from "@/components/solid/atoms/SimpleButton.tsx";
+import { delay } from "@/utils/delay.ts";
 
 async function loadMp3() {
   const response = await fetch(fixture);
+  await delay(1000);
   return await response.arrayBuffer();
 }
 
@@ -23,45 +26,62 @@ export const ManualTest: Component = () => {
     setPlaying((playing) => playing - 1);
   };
 
-  const [mp3] = createResource(loadMp3);
+  const [mp3, { refetch }] = createResource(loadMp3, {
+    ssrLoadFrom: "initial",
+    onHydrated() {
+      refetch();
+    },
+  });
+
+  function playMp3() {
+    const value = mp3();
+    if (value != null) {
+      play(value);
+    }
+  }
 
   return (
     <div>
-      <ol>
-        <li>
-          Press the play button
-          <ul>
-            <li>The text "ai hamni katate dori" should be played</li>
-            <li>During playback, "playing" should be shownw</li>
-            <li>After playback, "playing" should disappear</li>
-          </ul>
-        </li>
-        <li>
-          Press "play" and then "stop"
-          <ul>
-            <li>The text "ai hamni katate dori" should be played</li>
-            <li>On pressing stop, the playback should be stopped</li>
-          </ul>
-        </li>
-        <li>
-          Press "play" multiple times, before the playback is finished"
-          <ul>
-            <li>The text "ai hamni katate dori" should be played</li>
-            <li>On pressing "play" again, the previous playback should be stopped</li>
-          </ul>
-        </li>
-      </ol>
-      <div class="flex gap-2 items-center py-2">
-        {mp3.error && <p>Error while loading mp3: {mp3.error}</p>}
-        {mp3.loading && <p>Loading mp3</p>}
-        <button class="border-primary border bg-primary-light p-2 rounded" onClick={() => play(mp3()!)}>
-          {mp3.loading ? "Loading..." : "Play"}
-        </button>
-        <button class="border-primary border bg-primary-light p-2 rounded" onClick={() => stop()}>
-          Stop
-        </button>
+      <Instructions />
+      <div class="grid grid-cols-3 gap-2 items-center py-2 md:w-1/2">
+        <SimpleButton
+          disabled={mp3.loading || mp3.error}
+          label={mp3.loading ? "Loading..." : "Play"}
+          onClick={playMp3}
+        />
+        <SimpleButton disabled={mp3.loading || mp3.error} label={"Stop"} onClick={() => stop()} />
+        {mp3.error && <div>Error while loading mp3: {mp3.error}</div>}
         <div>{playing() > 0 && "Playing"}</div>
       </div>
     </div>
   );
 };
+
+const Instructions: Component = () => {
+  return (
+    <ol>
+      <li>
+        Press the play button
+        <ul>
+          <li>The text "ai hamni katate dori" should be played</li>
+          <li>During playback, "playing" should be shownw</li>
+          <li>After playback, "playing" should disappear</li>
+        </ul>
+      </li>
+      <li>
+        Press "play" and then "stop"
+        <ul>
+          <li>The text "ai hamni katate dori" should be played</li>
+          <li>On pressing stop, the playback should be stopped</li>
+        </ul>
+      </li>
+      <li>
+        Press "play" multiple times, before the playback is finished"
+        <ul>
+          <li>The text "ai hamni katate dori" should be played</li>
+          <li>On pressing "play" again, the previous playback should be stopped</li>
+        </ul>
+      </li>
+    </ol>
+  );
+};

src/components/solid/atoms/ButtonIcon.tsx

@@ -0,0 +1,15 @@
+import type { Component } from "solid-js";
+import { cls } from "$core/utils/cls.ts";
+
+interface ButtonIconProps {
+  icon: Component<{ class?: string }> | string;
+  class?: string;
+}
+
+export const ButtonIcon: Component<ButtonIconProps> = (props) => {
+  return typeof props.icon === "string" ? (
+    <img src={props.icon} class={cls("h-6", props.class)} alt="" />
+  ) : (
+    <props.icon class={props.class} />
+  );
+};

src/components/solid/atoms/LinkButton.manual-test.tsx

@@ -0,0 +1,37 @@
+import { type Component, For } from "solid-js";
+import { buttonColors, buttonSizes, type SimpleButtonProps } from "@/components/solid/atoms/SimpleButton.tsx";
+import { IconPrint } from "@/icons";
+import { LinkButton } from "@/components/solid/atoms/LinkButton.tsx";
+import logo from "@/assets/logo.svg?url";
+
+// {(color) => <ShowCase size={size} color={color} />}
+export const ManualTest: Component = () => {
+  return (
+    <div class={"flex flex-col gap-4"}>
+      <For each={buttonSizes}>
+        {(size) => (
+          <For each={buttonColors}>
+            {(color) => (
+              <>
+                <ShowCase size={size} color={color} />
+              </>
+            )}
+          </For>
+        )}
+      </For>
+    </div>
+  );
+};
+
+const ShowCase: Component<Omit<SimpleButtonProps, "children" | "icon">> = (props) => {
+  return (
+    <div data-testid={"SimpleButton-ShowCase"} class={"flex items-center gap-4"}>
+      <LinkButton {...props} label={"Print"} href={"#"} />
+      <LinkButton {...props} label={"Print"} icon={IconPrint} href={"#"} />
+      <LinkButton {...props} icon={IconPrint} href={"#"} />
+      <LinkButton {...props} icon={logo} href={"#"} />
+      <LinkButton {...props} icon={logo} label="Aikido" href={"#"} />
+      <div>{JSON.stringify(props)}</div>
+    </div>
+  );
+};

src/components/solid/atoms/LinkButton.tsx

@@ -0,0 +1,26 @@
+import { type Component } from "solid-js";
+import { type ButtonColor, type ButtonSize, createButtonClasses } from "@/components/solid/hooks/createButtonClasses";
+import { ButtonIcon } from "@/components/solid/atoms/ButtonIcon.tsx";
+
+export { buttonColors, buttonSizes } from "@/components/solid/hooks/createButtonClasses";
+
+export interface SimpleButtonProps {
+  size?: ButtonSize;
+  color?: ButtonColor;
+  icon?: Component<{ class?: string }> | string;
+  label?: string;
+  href: string;
+}
+
+export const LinkButton: Component<SimpleButtonProps> = (props) => {
+  const { buttonClasses, iconClasses } = createButtonClasses(() => ({
+    ...props,
+  }));
+
+  return (
+    <a href={props.href} class={buttonClasses()}>
+      {props.icon && <ButtonIcon icon={props.icon} class={iconClasses()} />}
+      {props.label}
+    </a>
+  );
+};

src/components/solid/hooks/createButtonClasses.ts

@@ -14,13 +14,14 @@ export interface ButtonClassProps {
 }
 
 const sizeClasses: Record<NonNullable<ButtonClassProps["size"]>, string> = {
-  normal: "p-4",
-  small: "p-2 text-sm",
+  normal: "p-4 gap-2",
+  small: "p-2 text-sm gap-1",
 };
 
 const colorClasses: Record<NonNullable<ButtonClassProps["color"]>, string> = {
-  primary: "border-primary text-primary-dark outline-primary hover:bg-primary-lightest",
-  secondary: "border-secondary text-secondary-dark outline-secondary  hover:bg-secondary-lightest",
+  primary: "border-primary text-primary-dark outline-primary hover:bg-primary-lightest disabled:hover:bg-white",
+  secondary:
+    "border-secondary text-secondary-dark outline-secondary  hover:bg-secondary-lightest disabled:hover:bg-white",
 };
 
 const highlightClasses = "outline outline-4 -outline-offset-4 active:outline-1 active:outline-offset-0";
@@ -31,7 +32,7 @@ const highlightedColorClasses: Record<NonNullable<ButtonClassProps["color"]>, st
 
 const iconSize: Record<NonNullable<ButtonClassProps["size"]>, string> = {
   normal: "",
-  small: "scale-80 origin-center",
+  small: "scale-75 origin-center",
 };
 
 const iconColor: Record<NonNullable<ButtonClassProps["color"]>, string> = {
@@ -46,7 +47,7 @@ export const createButtonClasses = (props: Accessor<ButtonClassProps>) => {
   return {
     buttonClasses: createMemo(() => {
       return cls(
-        "flex items-center gap-2 border rounded whitespace-nowrap truncate print:p-1 transition-all duration-100",
+        "flex items-center border rounded whitespace-nowrap truncate print:p-1 transition-all duration-100 hover:no-underline",
         "active:outline",
         "disabled:grayscale disabled:opacity-50",
         highlighted() && highlightClasses,

src/layouts/Home.astro

@@ -15,8 +15,7 @@ import Footer from "@/components/astro/Footer.astro";
 
 import "@/assets/styles/styles.scss";
 import { listDojos } from "../data/dojos";
-import LinkButton from "../components/astro/LinkButton.astro";
-import Brand from "../components/astro/header/Brand.astro";
+import {LinkButton} from "@/components/solid/atoms/LinkButton.tsx"
 import LocaleSwitcher from "../components/astro/LocaleSwitcher.astro";
 import {t} from "@/i18n"
 import {l} from "astro-i18n"
@@ -32,11 +31,11 @@ const dojos = await listDojos();
   <div class="flex flex-col items-center gap-8 mt-20">
     <header class="text-3xl">{title}</header>
     <img class="w-64" alt="Hero image" src={hero} />
-    <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
+    <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 md:gap-8">
       {
         teaser.map((item) => {
           return (
-            <div class="bg-primary-light p-2">
+            <div class="bg-primary-lightest px-4 py-2">
               <header class="font-bold">{item.title}</header>
               <p>{item.text}</p>
             </div>
@@ -49,10 +48,7 @@ const dojos = await listDojos();
       {
         dojos.map((dojo) => {
           return (
-            <LinkButton href={l(`/${dojo.id}`)}>
-              <img class="h-4" alt="logo" src={dojo.logo} />
-              {dojo.name}
-            </LinkButton>
+            <LinkButton href={l(`/${dojo.id}`)} icon={dojo.logo} label={dojo.name} />
           );
         })
       }