tududi/frontend/components/Task/TaskDetails/TaskRecurringInstanceInfo.tsx
2025-12-07 14:12:38 +02:00

56 lines
2 KiB
TypeScript

import React from 'react';
import { useTranslation } from 'react-i18next';
import { Link } from 'react-router-dom';
import { Task } from '../../../entities/Task';
interface TaskRecurringInstanceInfoProps {
task: Task;
parentTask: Task | null;
loadingParent: boolean;
}
const TaskRecurringInstanceInfo: React.FC<TaskRecurringInstanceInfoProps> = ({
task,
parentTask,
loadingParent,
}) => {
const { t } = useTranslation();
if (!task.recurring_parent_id) {
return null;
}
return (
<div className="mb-6 p-4 rounded-lg shadow-sm bg-purple-50 dark:bg-purple-900/20">
<div className="flex-1 min-w-0">
<p className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
{t(
'task.instanceOf',
'This is an instance of a recurring task'
)}
</p>
{loadingParent && (
<div className="flex items-center">
<div className="animate-spin rounded-full h-4 w-4 border-b-2 border-gray-500 mr-2"></div>
<span className="text-sm text-gray-600 dark:text-gray-400">
{t('common.loading', 'Loading parent task...')}
</span>
</div>
)}
{parentTask && (
<p className="text-sm text-gray-600 dark:text-gray-400">
<strong>{t('task.parentTask', 'Parent Task')}:</strong>{' '}
<Link
to={`/task/${parentTask.uid}`}
className="text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 hover:underline font-medium"
>
{parentTask.name}
</Link>
</p>
)}
</div>
</div>
);
};
export default TaskRecurringInstanceInfo;