creates video voice memos from audio clips; with bluesky integration.
trill.ptr.pet
ptr.pet
1import type { JSX } from 'solid-js'
2import { Show, splitProps } from 'solid-js'
3import { Center, styled } from 'styled-system/jsx'
4import { Spinner } from './spinner'
5import { Button as StyledButton, type ButtonProps as StyledButtonProps } from './styled/button'
6
7interface ButtonLoadingProps {
8 loading?: boolean
9 loadingText?: JSX.Element
10}
11
12export interface ButtonProps extends StyledButtonProps, ButtonLoadingProps {}
13
14export const Button = (props: ButtonProps) => {
15 const [localProps, rest] = splitProps(props, ['loading', 'disabled', 'loadingText', 'children'])
16 const trulyDisabled = () => localProps.loading || localProps.disabled
17
18 return (
19 <StyledButton disabled={trulyDisabled()} {...rest}>
20 <Show
21 when={localProps.loading && !localProps.loadingText}
22 fallback={localProps.loadingText || localProps.children}
23 >
24 <>
25 <ButtonSpinner />
26 <styled.span opacity={0}>{localProps.children}</styled.span>
27 </>
28 </Show>
29 </StyledButton>
30 )
31}
32
33const ButtonSpinner = () => (
34 <Center inline position="absolute" transform="translate(-50%, -50%)" top="50%" insetStart="50%">
35 <Spinner
36 width="1.1em"
37 height="1.1em"
38 borderWidth="1.5px"
39 borderTopColor="fg.disabled"
40 borderRightColor="fg.disabled"
41 />
42 </Center>
43)