71 lines
2.5 KiB
TypeScript
71 lines
2.5 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import { FormField } from '@/lib/types';
|
|
|
|
interface ToolFormProps {
|
|
fields: FormField[];
|
|
onSubmit: (data: Record<string, string>) => void;
|
|
loading?: boolean;
|
|
}
|
|
|
|
export default function ToolForm({ fields, onSubmit, loading }: ToolFormProps) {
|
|
const [values, setValues] = useState<Record<string, string>>({});
|
|
|
|
const handleSubmit = (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
onSubmit(values);
|
|
};
|
|
|
|
return (
|
|
<form onSubmit={handleSubmit} className="space-y-4">
|
|
{fields.map((field) => (
|
|
<div key={field.name}>
|
|
<label className="block text-sm font-medium text-dark mb-1">
|
|
{field.label}
|
|
{field.required && <span className="text-red-500 ml-1">*</span>}
|
|
</label>
|
|
{field.type === 'textarea' ? (
|
|
<textarea
|
|
value={values[field.name] || ''}
|
|
onChange={(e) => setValues({ ...values, [field.name]: e.target.value })}
|
|
placeholder={field.placeholder}
|
|
required={field.required}
|
|
rows={4}
|
|
className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-accent/50 focus:border-accent"
|
|
/>
|
|
) : field.type === 'select' ? (
|
|
<select
|
|
value={values[field.name] || ''}
|
|
onChange={(e) => setValues({ ...values, [field.name]: e.target.value })}
|
|
required={field.required}
|
|
className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-accent/50 focus:border-accent"
|
|
>
|
|
<option value="">Select...</option>
|
|
{field.options?.map((opt) => (
|
|
<option key={opt} value={opt}>{opt}</option>
|
|
))}
|
|
</select>
|
|
) : (
|
|
<input
|
|
type="text"
|
|
value={values[field.name] || ''}
|
|
onChange={(e) => setValues({ ...values, [field.name]: e.target.value })}
|
|
placeholder={field.placeholder}
|
|
required={field.required}
|
|
className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-accent/50 focus:border-accent"
|
|
/>
|
|
)}
|
|
</div>
|
|
))}
|
|
<button
|
|
type="submit"
|
|
disabled={loading}
|
|
className="w-full bg-accent hover:bg-accent/90 text-white py-3 rounded-lg font-semibold transition-colors disabled:opacity-50"
|
|
>
|
|
{loading ? 'Generating...' : '✨ Generate'}
|
|
</button>
|
|
</form>
|
|
);
|
|
}
|