Initial commit

components/features/kanban/TaskCard.tsx

@@ -0,0 +1,62 @@
+'use client';
+
+import { Card, CardContent, CardHeader } from '@/components/ui/card';
+import { Clock, User } from 'lucide-react';
+import type { TaskCard as TaskCardType } from '@/types/kanban';
+
+interface TaskCardProps {
+  task: TaskCardType;
+  isDragging?: boolean;
+}
+
+export function TaskCard({ task, isDragging = false }: TaskCardProps) {
+  const priorityColors = {
+    Low: 'bg-blue-100 text-blue-700',
+    Medium: 'bg-yellow-100 text-yellow-700',
+    High: 'bg-orange-100 text-orange-700',
+    Urgent: 'bg-red-100 text-red-700',
+  };
+
+  return (
+    <Card
+      className={`cursor-move transition-shadow hover:shadow-md ${
+        isDragging ? 'opacity-50 shadow-lg' : ''
+      }`}
+    >
+      <CardHeader className="p-4 pb-2">
+        <div className="flex items-start justify-between gap-2">
+          <h4 className="text-sm font-medium leading-tight">{task.title}</h4>
+          <span
+            className={`rounded-full px-2 py-0.5 text-xs font-medium ${
+              priorityColors[task.priority as keyof typeof priorityColors] ||
+              priorityColors.Medium
+            }`}
+          >
+            {task.priority}
+          </span>
+        </div>
+      </CardHeader>
+      <CardContent className="p-4 pt-0">
+        {task.description && (
+          <p className="mb-3 line-clamp-2 text-xs text-muted-foreground">
+            {task.description}
+          </p>
+        )}
+        <div className="flex items-center gap-4 text-xs text-muted-foreground">
+          {task.estimatedHours && (
+            <div className="flex items-center gap-1">
+              <Clock className="h-3 w-3" />
+              <span>{task.estimatedHours}h</span>
+            </div>
+          )}
+          {task.assigneeId && (
+            <div className="flex items-center gap-1">
+              <User className="h-3 w-3" />
+              <span>Assigned</span>
+            </div>
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}