kopia lustrzana https://github.com/cloudflare/wildebeest
35 wiersze
1018 B
TypeScript
35 wiersze
1018 B
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 TextArea = component$<Props>(
|
|
({ class: className, label, name, description, invalid, value, required }) => {
|
|
const inputId = useSignal(`${label.replace(/\s+/g, '_')}___${crypto.randomUUID()}`).value
|
|
return (
|
|
<div class={`mb-6 ${className || ''}`}>
|
|
<label class="font-semibold block mb-1" for={inputId}>
|
|
{label}
|
|
{!!required && <span class="ml-1 text-red-500">*</span>}
|
|
</label>
|
|
{!!description && <div class="text-sm inline-block mb-2 text-wildebeest-400">{description}</div>}
|
|
<textarea
|
|
class={`bg-black text-white p-3 rounded outline-none border hover:border-wildebeest-vibrant-500 focus:border-wildebeest-vibrant-500 w-full ${
|
|
invalid ? 'border-red-500' : 'border-black'
|
|
}`}
|
|
id={inputId}
|
|
name={name}
|
|
value={value}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|
|
)
|