init

dmtp/client/components/tasks/TaskCard.tsx

@@ -0,0 +1,65 @@
+'use client';
+
+import { formatCurrency, formatTimeRemaining } from '@/lib/utils';
+import { Task, TaskType } from '@/types';
+import Link from 'next/link';
+
+interface TaskCardProps {
+  task: Task;
+}
+
+export function TaskCard({ task }: TaskCardProps) {
+  const taskTypeLabels: Record<TaskType, string> = {
+    [TaskType.TEXT_VERIFICATION]: 'Text',
+    [TaskType.IMAGE_LABELING]: 'Image',
+    [TaskType.SURVEY]: 'Survey',
+    [TaskType.CONTENT_MODERATION]: 'Moderation',
+  };
+
+  return (
+    <Link href={`/tasks/${task.id}`}>
+      <div className="bg-white border-2 border-gray-200 hover:border-primary transition-colors p-6 cursor-pointer">
+        {/* Header */}
+        <div className="flex items-start justify-between mb-3">
+          <h3 className="text-base font-bold text-gray-900 line-clamp-2">
+            {task.title}
+          </h3>
+          {task.paymentAmount >= 5 && (
+            <span className="text-xs bg-primary text-white px-2 py-1 font-semibold ml-2 flex-shrink-0">
+              HIGH
+            </span>
+          )}
+        </div>
+
+        {/* Description */}
+        <p className="text-sm text-gray-600 mb-4 line-clamp-2 leading-relaxed">{task.description}</p>
+
+        {/* Stats Grid */}
+        <div className="grid grid-cols-2 gap-4 mb-4 pb-4 border-b border-gray-200">
+          <div>
+            <div className="text-xs text-gray-500 mb-1">Payment</div>
+            <div className="font-bold text-primary text-base">
+              {formatCurrency(task.paymentAmount)}
+            </div>
+          </div>
+          <div>
+            <div className="text-xs text-gray-500 mb-1">Available</div>
+            <div className="font-semibold text-gray-900 text-base">
+              {task.spotsRemaining}/{task.maxSubmissions}
+            </div>
+          </div>
+        </div>
+
+        {/* Footer */}
+        <div className="flex items-center justify-between">
+          <span className="text-xs px-2 py-1 bg-gray-100 text-gray-700 border border-gray-200 font-medium">
+            {taskTypeLabels[task.taskType]}
+          </span>
+          <span className="text-xs text-gray-500 font-medium">
+            {formatTimeRemaining(task.expiresAt)}
+          </span>
+        </div>
+      </div>
+    </Link>
+  );
+}