72 lines
2.4 KiB
TypeScript
72 lines
2.4 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import { WorkItemFormData } from '@/lib/types';
|
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
|
import { faSave } from '@fortawesome/free-solid-svg-icons';
|
|
|
|
interface WorkItemFormProps {
|
|
initialData?: WorkItemFormData;
|
|
onSubmit: (data: WorkItemFormData) => void;
|
|
submitText?: string;
|
|
}
|
|
|
|
export default function WorkItemForm({
|
|
initialData,
|
|
onSubmit,
|
|
submitText = 'Save'
|
|
}: WorkItemFormProps) {
|
|
const [formData, setFormData] = useState<WorkItemFormData>(
|
|
initialData || { title: '', description: '' }
|
|
);
|
|
|
|
const handleSubmit = (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
if (formData.title.trim() && formData.description.trim()) {
|
|
onSubmit(formData);
|
|
if (!initialData) {
|
|
setFormData({ title: '', description: '' });
|
|
}
|
|
}
|
|
};
|
|
|
|
return (
|
|
<form onSubmit={handleSubmit} className="space-y-4">
|
|
<div>
|
|
<label htmlFor="title" className="block text-sm font-medium text-gray-700 mb-1">
|
|
Title
|
|
</label>
|
|
<input
|
|
type="text"
|
|
id="title"
|
|
value={formData.title}
|
|
onChange={(e) => setFormData({ ...formData, title: e.target.value })}
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label htmlFor="description" className="block text-sm font-medium text-gray-700 mb-1">
|
|
Description
|
|
</label>
|
|
<textarea
|
|
id="description"
|
|
rows={4}
|
|
value={formData.description}
|
|
onChange={(e) => setFormData({ ...formData, description: e.target.value })}
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<button
|
|
type="submit"
|
|
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 transition-colors duration-200"
|
|
>
|
|
<FontAwesomeIcon icon={faSave} className="mr-2 h-4 w-4" />
|
|
{submitText}
|
|
</button>
|
|
</form>
|
|
);
|
|
} |