54 lines
No EOL
1.7 KiB
TypeScript
54 lines
No EOL
1.7 KiB
TypeScript
import React from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { PriorityType, StatusType } from '../../../entities/Task';
|
|
import StatusDropdown from '../../Shared/StatusDropdown';
|
|
import PriorityDropdown from '../../Shared/PriorityDropdown';
|
|
|
|
interface TaskMetadataSectionProps {
|
|
priority: PriorityType;
|
|
dueDate: string;
|
|
taskId: number | undefined;
|
|
onStatusChange: (value: StatusType) => void;
|
|
onPriorityChange: (value: PriorityType) => void;
|
|
onDueDateChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
|
|
}
|
|
|
|
const TaskMetadataSection: React.FC<TaskMetadataSectionProps> = ({
|
|
priority,
|
|
dueDate,
|
|
taskId,
|
|
onStatusChange,
|
|
onPriorityChange,
|
|
onDueDateChange
|
|
}) => {
|
|
const { t } = useTranslation();
|
|
|
|
return (
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|
{t('forms.task.labels.priority', 'Priority')}
|
|
</label>
|
|
<PriorityDropdown
|
|
value={priority}
|
|
onChange={onPriorityChange}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|
{t('forms.task.labels.dueDate', 'Due Date')}
|
|
</label>
|
|
<input
|
|
type="date"
|
|
id={`task_due_date_${taskId}`}
|
|
name="due_date"
|
|
value={dueDate}
|
|
onChange={onDueDateChange}
|
|
className="block w-full focus:outline-none focus:ring-2 focus:ring-blue-500 shadow-sm px-3 py-2 text-sm bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-600 rounded-md text-gray-900 dark:text-gray-100"
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default TaskMetadataSection; |