53 lines
1.4 KiB
TypeScript
53 lines
1.4 KiB
TypeScript
import { Show, children } from 'solid-js'
|
|
import * as StyledNumberInput from './styled/number-input'
|
|
|
|
export interface NumberInputProps extends StyledNumberInput.RootProps {}
|
|
|
|
export const NumberInput = (props: NumberInputProps) => {
|
|
const getChildren = children(() => props.children)
|
|
|
|
return (
|
|
<StyledNumberInput.Root {...props}>
|
|
<Show when={getChildren()}>
|
|
<StyledNumberInput.Label>{getChildren()}</StyledNumberInput.Label>
|
|
</Show>
|
|
<StyledNumberInput.Control>
|
|
<StyledNumberInput.Input />
|
|
<StyledNumberInput.IncrementTrigger>
|
|
<ChevronUpIcon />
|
|
</StyledNumberInput.IncrementTrigger>
|
|
<StyledNumberInput.DecrementTrigger>
|
|
<ChevronDownIcon />
|
|
</StyledNumberInput.DecrementTrigger>
|
|
</StyledNumberInput.Control>
|
|
</StyledNumberInput.Root>
|
|
)
|
|
}
|
|
|
|
const ChevronUpIcon = () => (
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
|
<title>Chevron Up Icon</title>
|
|
<path
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="m18 15l-6-6l-6 6"
|
|
/>
|
|
</svg>
|
|
)
|
|
|
|
const ChevronDownIcon = () => (
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
|
<title>Chevron Down Icon</title>
|
|
<path
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="m6 9l6 6l6-6"
|
|
/>
|
|
</svg>
|
|
)
|