components/TaskCard.tsx - master - KDP/ADOS

components/TaskCard.tsx
64 строки2 KB
Krylov Dmitry
Рыба
01 янв 2026, 20:44
01 янв 2026, 20:44f51b546

import React from 'react';
import { WorkItem } from '../types';

interface TaskCardProps {
  item: WorkItem;
}

const TaskCard: React.FC<TaskCardProps> = ({ item }) => {
  const { fields } = item;
  const type = fields["System.WorkItemType"];
  const state = fields["System.State"];
  const priority = fields["Microsoft.VSTS.Common.Priority"];

  const getTypeColor = () => {
    switch(type) {
      case 'Bug': return 'bg-red-100 text-red-700 border-red-200';
      case 'Task': return 'bg-blue-100 text-blue-700 border-blue-200';
      case 'User Story': return 'bg-sky-100 text-sky-700 border-sky-200';
      default: return 'bg-slate-100 text-slate-700 border-slate-200';
    }
  };

  const getStateColor = () => {
    switch(state) {
      case 'Active': return 'bg-green-100 text-green-700';
      case 'New': return 'bg-amber-100 text-amber-700';
      case 'Resolved': return 'bg-purple-100 text-purple-700';
      default: return 'bg-slate-100 text-slate-600';
    }
  };

  return (
    <div className="bg-white p-4 rounded-2xl border border-slate-200 shadow-sm hover:shadow-md transition-shadow cursor-pointer">
      <div className="flex justify-between items-start mb-2">
        <span className={`text-[10px] font-bold px-2 py-0.5 rounded-full border ${getTypeColor()}`}>
          {type.toUpperCase()} #{item.id}
        </span>
        <span className={`text-[10px] font-semibold px-2 py-0.5 rounded-full ${getStateColor()}`}>
          {state}
        </span>
      </div>
      
      <h3 className="text-sm font-semibold text-slate-800 line-clamp-2 mb-3">
        {fields["System.Title"]}
      </h3>
      
      <div className="flex items-center justify-between text-[11px] text-slate-500">
        <div className="flex items-center gap-1">
          <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
          </svg>
          {fields["System.TeamProject"]}
        </div>
        {priority !== undefined && (
          <div className="flex items-center gap-1">
            <span className="font-medium">P{priority}</span>
          </div>
        )}
      </div>
    </div>
  );
};

export default TaskCard;