29 lines
1.4 KiB
TypeScript
29 lines
1.4 KiB
TypeScript
|
import React from 'react';
|
||
|
|
import type { MessageBlock } from '@/store/commStore';
|
||
|
|
import { CheckSquare, Clock, User } from 'lucide-react';
|
||
|
|
|
||
|
|
interface TaskCardBlockProps {
|
||
|
|
block: MessageBlock;
|
||
|
|
}
|
||
|
|
|
||
|
|
const TaskCardBlock: React.FC<TaskCardBlockProps> = ({ block }) => {
|
||
|
|
const { title, assignee, due_date, priority, status, task_id } = block.block_data;
|
||
|
|
const priorityColor = priority === 'high' ? 'text-danger-600' : priority === 'medium' ? 'text-warning-600' : 'text-secondary-500';
|
||
|
|
return (
|
||
|
|
<div className="border border-secondary-200 rounded-lg p-3 bg-white">
|
||
|
|
<div className="flex items-center gap-2 mb-2">
|
||
|
|
<CheckSquare className="w-4 h-4 text-primary-600" />
|
||
|
|
<span className="text-sm font-medium text-secondary-900">{title || 'Task'}</span>
|
||
|
|
{status && <span className="text-xs px-2 py-0.5 rounded-full bg-secondary-100 text-secondary-600 capitalize">{status}</span>}
|
||
|
|
</div>
|
||
|
|
<div className="flex items-center gap-3 text-xs text-secondary-500">
|
||
|
|
{assignee && <span className="flex items-center gap-1"><User className="w-3 h-3" /> {assignee}</span>}
|
||
|
|
{due_date && <span className="flex items-center gap-1"><Clock className="w-3 h-3" /> {due_date}</span>}
|
||
|
|
{priority && <span className={priorityColor}>● {priority}</span>}
|
||
|
|
</div>
|
||
|
|
{task_id && <p className="text-xs text-secondary-400 mt-1">Task: {task_id.slice(0, 8)}</p>}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
export default TaskCardBlock;
|