From 91629d7d7d2f1189116dea3e45da3b65c1a7e983 Mon Sep 17 00:00:00 2001 From: Nils Knappmeier Date: Fri, 5 Apr 2024 19:48:43 +0200 Subject: [PATCH] same buttons everywhere. --- .../playArrayBuffer.manual-test.tsx | 88 ++++++++++++------- src/components/astro/LinkButton.astro | 10 --- src/components/solid/atoms/ButtonIcon.tsx | 15 ++++ .../solid/atoms/LinkButton.manual-test.tsx | 37 ++++++++ src/components/solid/atoms/LinkButton.tsx | 26 ++++++ .../solid/hooks/createButtonClasses.ts | 13 +-- src/layouts/Home.astro | 12 +-- 7 files changed, 143 insertions(+), 58 deletions(-) delete mode 100644 src/components/astro/LinkButton.astro create mode 100644 src/components/solid/atoms/ButtonIcon.tsx create mode 100644 src/components/solid/atoms/LinkButton.manual-test.tsx create mode 100644 src/components/solid/atoms/LinkButton.tsx diff --git a/src/adapters/playArrayBuffer/playArrayBuffer.manual-test.tsx b/src/adapters/playArrayBuffer/playArrayBuffer.manual-test.tsx index b60fffb..895ef2a 100644 --- a/src/adapters/playArrayBuffer/playArrayBuffer.manual-test.tsx +++ b/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 (
-
    -
  1. - Press the play button -
      -
    • The text "ai hamni katate dori" should be played
      • -
    • During playback, "playing" should be shownw
      • -
    • After playback, "playing" should disappear
      • -
    -
    2. -
  2. - Press "play" and then "stop" -
      -
    • The text "ai hamni katate dori" should be played
      • -
    • On pressing stop, the playback should be stopped
      • -
    -
    3. -
  3. - Press "play" multiple times, before the playback is finished" -
      -
    • The text "ai hamni katate dori" should be played
      • -
    • On pressing "play" again, the previous playback should be stopped
      • -
    -
    4. -
-
- {mp3.error &&

Error while loading mp3: {mp3.error}

} - {mp3.loading &&

Loading mp3

} - - + +
+ + stop()} /> + {mp3.error &&
Error while loading mp3: {mp3.error}
}
{playing() > 0 && "Playing"}
); }; + +const Instructions: Component = () => { + return ( +
    +
  1. + Press the play button +
      +
    • The text "ai hamni katate dori" should be played
      • +
    • During playback, "playing" should be shownw
      • +
    • After playback, "playing" should disappear
      • +
    +
    2. +
  2. + Press "play" and then "stop" +
      +
    • The text "ai hamni katate dori" should be played
      • +
    • On pressing stop, the playback should be stopped
      • +
    +
    3. +
  3. + Press "play" multiple times, before the playback is finished" +
      +
    • The text "ai hamni katate dori" should be played
      • +
    • On pressing "play" again, the previous playback should be stopped
      • +
    +
    4. +
+ ); +}; diff --git a/src/components/astro/LinkButton.astro b/src/components/astro/LinkButton.astro deleted file mode 100644 index f72b925..0000000 --- a/src/components/astro/LinkButton.astro +++ /dev/null @@ -1,10 +0,0 @@ ---- -export interface Props { - href: string -} -const props=Astro.props - ---- - - - \ No newline at end of file diff --git a/src/components/solid/atoms/ButtonIcon.tsx b/src/components/solid/atoms/ButtonIcon.tsx new file mode 100644 index 0000000..59931a9 --- /dev/null +++ b/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 = (props) => { + return typeof props.icon === "string" ? ( + + ) : ( + + ); +}; diff --git a/src/components/solid/atoms/LinkButton.manual-test.tsx b/src/components/solid/atoms/LinkButton.manual-test.tsx new file mode 100644 index 0000000..d112a43 --- /dev/null +++ b/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) => } +export const ManualTest: Component = () => { + return ( +
+ + {(size) => ( + + {(color) => ( + <> + + + )} + + )} + +
+ ); +}; + +const ShowCase: Component> = (props) => { + return ( +
+ + + + + +
{JSON.stringify(props)}
+
+ ); +}; diff --git a/src/components/solid/atoms/LinkButton.tsx b/src/components/solid/atoms/LinkButton.tsx new file mode 100644 index 0000000..992af26 --- /dev/null +++ b/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 = (props) => { + const { buttonClasses, iconClasses } = createButtonClasses(() => ({ + ...props, + })); + + return ( + + {props.icon && } + {props.label} + + ); +}; diff --git a/src/components/solid/hooks/createButtonClasses.ts b/src/components/solid/hooks/createButtonClasses.ts index bba5ed8..bdd1331 100644 --- a/src/components/solid/hooks/createButtonClasses.ts +++ b/src/components/solid/hooks/createButtonClasses.ts @@ -14,13 +14,14 @@ export interface ButtonClassProps { } const sizeClasses: Record, string> = { - normal: "p-4", - small: "p-2 text-sm", + normal: "p-4 gap-2", + small: "p-2 text-sm gap-1", }; const colorClasses: Record, 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, st const iconSize: Record, string> = { normal: "", - small: "scale-80 origin-center", + small: "scale-75 origin-center", }; const iconColor: Record, string> = { @@ -46,7 +47,7 @@ export const createButtonClasses = (props: Accessor) => { 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, diff --git a/src/layouts/Home.astro b/src/layouts/Home.astro index 54369e8..82d7170 100644 --- a/src/layouts/Home.astro +++ b/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();
{title}
Hero image -
+
{ teaser.map((item) => { return ( -
+
{item.title}

{item.text}

@@ -49,10 +48,7 @@ const dojos = await listDojos(); { dojos.map((dojo) => { return ( - - logo - {dojo.name} - + ); }) }