51 lines
1.3 KiB
TypeScript
51 lines
1.3 KiB
TypeScript
|
import type { InputHTMLAttributes, TextareaHTMLAttributes } from 'react'
|
||
|
|
import type { IconComponent } from '../shared/Icons'
|
||
|
|
|
||
|
|
interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
|
||
|
|
value: string
|
||
|
|
onChange: (value: string) => void
|
||
|
|
Icon?: IconComponent
|
||
|
|
}
|
||
|
|
|
||
|
|
interface TextareaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'onChange'> {
|
||
|
|
value: string
|
||
|
|
onChange: (value: string) => void
|
||
|
|
rows?: number
|
||
|
|
}
|
||
|
|
|
||
|
|
export function Input({ value, onChange, Icon, className = '', ...props }: InputProps) {
|
||
|
|
if (Icon) {
|
||
|
|
return (
|
||
|
|
<div className="relative">
|
||
|
|
<Icon className="absolute left-3 top-1/2 -translate-y-1/2 text-muted text-sm" />
|
||
|
|
<input
|
||
|
|
className={`input pl-9 ${className}`}
|
||
|
|
value={value}
|
||
|
|
onChange={e => onChange(e.target.value)}
|
||
|
|
{...props}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
return (
|
||
|
|
<input
|
||
|
|
className={`input ${className}`}
|
||
|
|
value={value}
|
||
|
|
onChange={e => onChange(e.target.value)}
|
||
|
|
{...props}
|
||
|
|
/>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export function Textarea({ value, onChange, rows = 4, className = '', ...props }: TextareaProps) {
|
||
|
|
return (
|
||
|
|
<textarea
|
||
|
|
className={`input resize-none ${className}`}
|
||
|
|
value={value}
|
||
|
|
onChange={e => onChange(e.target.value)}
|
||
|
|
rows={rows}
|
||
|
|
{...props}
|
||
|
|
/>
|
||
|
|
)
|
||
|
|
}
|