kopia lustrzana https://github.com/cloudflare/wildebeest
37 wiersze
1.1 KiB
TypeScript
37 wiersze
1.1 KiB
TypeScript
import { component$, useSignal } from '@builder.io/qwik'
|
|
|
|
type Props = {
|
|
label: string
|
|
name?: string
|
|
description?: string
|
|
class?: string
|
|
invalid?: boolean
|
|
value?: string
|
|
required?: boolean
|
|
}
|
|
|
|
export const TextInput = component$<Props>(
|
|
({ class: className, label, name, description, invalid, value, required }) => {
|
|
const inputId = useSignal(`${label.replace(/\s+/g, '_')}___${crypto.randomUUID()}`).value
|
|
const includeDefaultMb = !/(^|\s)m[y,b]?-\S+(\s|$)/.test(className || '')
|
|
return (
|
|
<div class={`${className || ''} ${includeDefaultMb ? 'mb-6' : ''}`}>
|
|
<label class="font-semibold block mb-2" for={inputId}>
|
|
{label}
|
|
{!!required && <span class="ml-1 text-red-500">*</span>}
|
|
</label>
|
|
<input
|
|
class={`bg-black text-white p-3 mb-1 rounded outline-none border hover:border-wildebeest-vibrant-500 focus:border-wildebeest-vibrant-500 w-full ${
|
|
invalid ? 'border-red-500' : 'border-black'
|
|
}`}
|
|
type="text"
|
|
id={inputId}
|
|
name={name}
|
|
value={value}
|
|
/>
|
|
{!!description && <div class="text-sm text-wildebeest-400">{description}</div>}
|
|
</div>
|
|
)
|
|
}
|
|
)
|