65 lines
1.4 KiB
TypeScript
65 lines
1.4 KiB
TypeScript
import React from 'react'
|
|
|
|
interface ArticleFieldProps {
|
|
id: string
|
|
label: string
|
|
value: string | number
|
|
onChange: (value: string | number) => void
|
|
required?: boolean
|
|
type?: 'text' | 'textarea' | 'number'
|
|
rows?: number
|
|
placeholder?: string
|
|
helpText?: string
|
|
min?: number
|
|
}
|
|
|
|
export function ArticleField({
|
|
id,
|
|
label,
|
|
value,
|
|
onChange,
|
|
required = false,
|
|
type = 'text',
|
|
rows,
|
|
placeholder,
|
|
helpText,
|
|
min,
|
|
}: ArticleFieldProps) {
|
|
const inputClass =
|
|
'w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500'
|
|
|
|
return (
|
|
<div>
|
|
<label htmlFor={id} className="block text-sm font-medium text-gray-700 mb-1">
|
|
{label} {required && '*'}
|
|
</label>
|
|
{type === 'textarea' ? (
|
|
<textarea
|
|
id={id}
|
|
value={value}
|
|
onChange={(e) => onChange(e.target.value)}
|
|
className={inputClass}
|
|
rows={rows}
|
|
placeholder={placeholder}
|
|
required={required}
|
|
/>
|
|
) : (
|
|
<input
|
|
id={id}
|
|
type={type}
|
|
value={value}
|
|
onChange={(e) =>
|
|
onChange(type === 'number' ? parseInt(e.target.value) || 800 : e.target.value)
|
|
}
|
|
className={inputClass}
|
|
placeholder={placeholder}
|
|
min={min}
|
|
required={required}
|
|
/>
|
|
)}
|
|
{helpText && <p className="text-xs text-gray-500 mt-1">{helpText}</p>}
|
|
</div>
|
|
)
|
|
}
|
|
|