56 lines
1.8 KiB
TypeScript
56 lines
1.8 KiB
TypeScript
import React from 'react';
|
|
import { MinusIcon, CheckCircleIcon, ArchiveBoxIcon, ArrowPathIcon } from '@heroicons/react/24/solid';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { StatusType } from '../../entities/Task';
|
|
|
|
interface TaskStatusBadgeProps {
|
|
status: StatusType | number;
|
|
className?: string;
|
|
}
|
|
|
|
const TaskStatusBadge: React.FC<TaskStatusBadgeProps> = ({ status, className }) => {
|
|
const { t } = useTranslation();
|
|
|
|
// Convert numeric status to string
|
|
const getStatusString = (status: StatusType | number): StatusType => {
|
|
if (typeof status === 'number') {
|
|
const statusNames: StatusType[] = ['not_started', 'in_progress', 'done', 'archived'];
|
|
return statusNames[status] || 'not_started';
|
|
}
|
|
return status;
|
|
};
|
|
|
|
const statusString = getStatusString(status);
|
|
let statusIcon, statusLabel;
|
|
|
|
switch (statusString) {
|
|
case 'not_started':
|
|
statusIcon = <MinusIcon className="h-4 w-4 text-gray-400" />;
|
|
statusLabel = t('status.notStarted', 'Not Started');
|
|
break;
|
|
case 'in_progress':
|
|
statusIcon = <ArrowPathIcon className="h-4 w-4 text-blue-400" />;
|
|
statusLabel = t('status.inProgress', 'In Progress');
|
|
break;
|
|
case 'done':
|
|
statusIcon = <CheckCircleIcon className="h-4 w-4 text-green-400" />;
|
|
statusLabel = t('status.done', 'Done');
|
|
break;
|
|
case 'archived':
|
|
statusIcon = <ArchiveBoxIcon className="h-4 w-4 text-gray-400" />;
|
|
statusLabel = t('status.archived', 'Archived');
|
|
break;
|
|
default:
|
|
statusIcon = <MinusIcon className="h-4 w-4 text-gray-400" />;
|
|
statusLabel = t('status.unknown', 'Unknown');
|
|
}
|
|
|
|
return (
|
|
<div className={`flex items-center md:px-2 ${className}`}>
|
|
{statusIcon}
|
|
{/* <span className="ml-2 text-xs font-medium inline md:hidden">{statusLabel}</span> */}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default TaskStatusBadge;
|