35 lines
1.1 KiB
TypeScript
35 lines
1.1 KiB
TypeScript
import { Loader2, Volume2 } from "lucide-solid"
|
|
import type { JSX } from "solid-js"
|
|
|
|
interface SpeechActionButtonProps {
|
|
class?: string
|
|
title: string
|
|
isLoading: boolean
|
|
isPlaying: boolean
|
|
onClick: JSX.EventHandlerUnion<HTMLButtonElement, MouseEvent>
|
|
type?: "button" | "submit" | "reset"
|
|
}
|
|
|
|
export default function SpeechActionButton(props: SpeechActionButtonProps) {
|
|
return (
|
|
<button
|
|
type={props.type ?? "button"}
|
|
class={props.class}
|
|
onClick={props.onClick}
|
|
aria-label={props.title}
|
|
title={props.title}
|
|
>
|
|
{props.isLoading ? (
|
|
<Loader2 class="w-3.5 h-3.5 animate-spin" aria-hidden="true" />
|
|
) : props.isPlaying ? (
|
|
<svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
|
<rect x="3" y="3" width="18" height="18" rx="2" />
|
|
<rect x="9" y="9" width="6" height="6" rx="1" fill="currentColor" stroke="none" />
|
|
</svg>
|
|
) : (
|
|
<Volume2 class="w-3.5 h-3.5" aria-hidden="true" />
|
|
)}
|
|
</button>
|
|
)
|
|
}
|