51 lines
1.7 KiB
TypeScript
51 lines
1.7 KiB
TypeScript
import React from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { parseDateString, getTodayDateString, getTomorrowDateString, getYesterdayDateString } from '../../utils/dateUtils';
|
|
|
|
interface TaskDueDateProps {
|
|
dueDate: string;
|
|
className?: string;
|
|
}
|
|
|
|
const TaskDueDate: React.FC<TaskDueDateProps> = ({ dueDate, className }) => {
|
|
const { t } = useTranslation();
|
|
const getDueDateClass = () => {
|
|
const today = getTodayDateString();
|
|
const tomorrow = getTomorrowDateString();
|
|
|
|
if (dueDate === today) return 'border-blue-700 dark:text-white';
|
|
if (dueDate === tomorrow) return 'border-blue-700 dark:text-white';
|
|
if (dueDate < today) return 'border-red-700 dark:text-white';
|
|
return 'border-gray-300 dark:text-white';
|
|
};
|
|
|
|
const formatDueDate = () => {
|
|
const today = getTodayDateString();
|
|
const tomorrow = getTomorrowDateString();
|
|
const yesterday = getYesterdayDateString();
|
|
|
|
if (dueDate === today) return t('dateIndicators.today', 'TODAY');
|
|
if (dueDate === tomorrow)
|
|
return t('dateIndicators.tomorrow', 'TOMORROW');
|
|
if (dueDate === yesterday)
|
|
return t('dateIndicators.yesterday', 'YESTERDAY');
|
|
|
|
const date = parseDateString(dueDate);
|
|
if (!date) return dueDate;
|
|
return date.toLocaleDateString(undefined, {
|
|
year: 'numeric',
|
|
month: 'short',
|
|
day: 'numeric',
|
|
});
|
|
};
|
|
|
|
return (
|
|
<div
|
|
className={`flex items-center text-xs py-1 px-2 rounded-md border ${getDueDateClass()} ${className}`}
|
|
>
|
|
{formatDueDate()}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default TaskDueDate;
|