Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | import { Globe, FileText } from 'lucide-react'
export default function UrlInput({
value,
onChange,
onSubmit,
placeholder = "https://example.com",
disabled = false,
loading = false,
buttonText = "Extraire",
icon = "globe"
}) {
const handleKeyDown = (e) => {
if (e.key === 'Enter' && !disabled && !loading) {
onSubmit?.()
}
}
const IconComponent = icon === 'file' ? FileText : Globe
return (
<div className="space-y-2">
<div className="flex gap-2">
<div className="flex-1 relative">
<IconComponent className="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400" />
<input
type="url"
value={value}
onChange={(e) => onChange(e.target.value)}
onKeyDown={handleKeyDown}
placeholder={placeholder}
disabled={disabled || loading}
className="input w-full pl-10"
/>
</div>
{onSubmit && (
<button
onClick={onSubmit}
disabled={disabled || loading || !value.trim()}
className="btn-primary inline-flex items-center disabled:opacity-50"
>
{buttonText}
</button>
)}
</div>
</div>
)
}
|