73 lines
2.2 KiB
TypeScript
73 lines
2.2 KiB
TypeScript
import { Plus } from 'lucide-react';
|
|
|
|
interface ImageFormProps {
|
|
url: string;
|
|
caption: string;
|
|
alt: string;
|
|
onUrlChange: (url: string) => void;
|
|
onCaptionChange: (caption: string) => void;
|
|
onAltChange: (alt: string) => void;
|
|
onSubmit: () => void;
|
|
submitLabel: string;
|
|
}
|
|
|
|
export function ImageForm({
|
|
url,
|
|
caption,
|
|
alt,
|
|
onUrlChange,
|
|
onCaptionChange,
|
|
onAltChange,
|
|
onSubmit,
|
|
submitLabel
|
|
}: ImageFormProps) {
|
|
return (
|
|
<div className="space-y-3">
|
|
<div>
|
|
<label htmlFor="imageUrl" className="block text-sm font-medium text-gray-700">
|
|
Image URL
|
|
</label>
|
|
<input
|
|
type="url"
|
|
id="imageUrl"
|
|
value={url}
|
|
onChange={(e) => onUrlChange(e.target.value)}
|
|
className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
|
|
placeholder="https://example.com/image.jpg"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label htmlFor="imageCaption" className="block text-sm font-medium text-gray-700">
|
|
Caption
|
|
</label>
|
|
<input
|
|
type="text"
|
|
id="imageCaption"
|
|
value={caption}
|
|
onChange={(e) => onCaptionChange(e.target.value)}
|
|
className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label htmlFor="imageAlt" className="block text-sm font-medium text-gray-700">
|
|
Alt Text
|
|
</label>
|
|
<input
|
|
type="text"
|
|
id="imageAlt"
|
|
value={alt}
|
|
onChange={(e) => onAltChange(e.target.value)}
|
|
className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
|
|
/>
|
|
</div>
|
|
<button
|
|
onClick={onSubmit}
|
|
disabled={!url.trim()}
|
|
className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
|
|
>
|
|
<Plus size={16} className="mr-2" />
|
|
{submitLabel}
|
|
</button>
|
|
</div>
|
|
);
|
|
} |