feat: add task creation and editing interface

components/TaskCard.tsx

@@ -0,0 +1,174 @@
+"use client";
+
+import type { Task } from "@/types/task";
+
+export default function TaskCard({
+  task,
+  onArchive,
+  onEdit,
+  onStatusClick,
+}: {
+  task: Task;
+  onArchive: (task: Task) => void;
+  onEdit: (task: Task) => void;
+  onStatusClick: (task: Task) => void;
+}) {
+  const cardStyle = {
+    ...styles.card,
+    ...(task.isOverdue ? styles.overdueCard : {}),
+    ...(task.archivedAt ? styles.archivedCard : {}),
+  };
+
+  return (
+    <div style={cardStyle}>
+      <div style={styles.cardHeader}>
+        <button
+          type="button"
+          style={{
+            ...styles.circle,
+            cursor:
+              task.status === "Complete" || task.archivedAt ? "default" : "pointer",
+          }}
+          onClick={() => onStatusClick(task)}
+          title="Change Status"
+          disabled={task.status === "Complete" || Boolean(task.archivedAt)}
+        >
+          {task.status === "Complete" ? "✓" : ""}
+        </button>
+
+        <div style={styles.cardTitle}>{task.title}</div>
+      </div>
+
+      <div style={styles.cardDescription}>
+        {task.description.slice(0, 60)}
+        {task.description.length > 60 && "..."}
+      </div>
+
+      <div style={styles.metaRow}>
+        <span>Due: {task.dueDate}</span>
+        <span>{task.topic}</span>
+      </div>
+
+      <div style={styles.badgeRow}>
+        <span style={styles.statusBadge}>{task.status}</span>
+        {task.isOverdue && <span style={styles.overdueBadge}>Overdue</span>}
+        {task.archivedAt && <span style={styles.archivedBadge}>Archived</span>}
+      </div>
+
+      <div style={styles.actions}>
+        <button type="button" onClick={() => onEdit(task)} style={styles.actionButton}>
+          Edit
+        </button>
+        <button
+          type="button"
+          onClick={() => onArchive(task)}
+          style={styles.actionButton}
+          disabled={Boolean(task.archivedAt)}
+        >
+          Archive
+        </button>
+      </div>
+    </div>
+  );
+}
+
+const styles = {
+  card: {
+    background: "#dae4f0",
+    padding: "18px",
+    borderRadius: "12px",
+    marginBottom: "15px",
+    color: "#0f172a",
+    fontSize: "16px",
+    border: "2px solid transparent",
+  },
+  overdueCard: {
+    borderColor: "#dc2626",
+    background: "#fee2e2",
+  },
+  archivedCard: {
+    opacity: 0.72,
+  },
+  cardHeader: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    marginBottom: "6px",
+    gap: "10px",
+  },
+  cardTitle: {
+    fontWeight: "700",
+    flex: 1,
+  },
+  cardDescription: {
+    fontSize: "13px",
+    opacity: 0.7,
+    marginBottom: "8px",
+  },
+  metaRow: {
+    display: "flex",
+    justifyContent: "space-between",
+    gap: "12px",
+    fontSize: "12px",
+    opacity: 0.72,
+    marginBottom: "10px",
+  },
+  badgeRow: {
+    display: "flex",
+    flexWrap: "wrap" as const,
+    gap: "6px",
+    marginBottom: "12px",
+  },
+  statusBadge: {
+    background: "#e0f2fe",
+    color: "#075985",
+    borderRadius: "999px",
+    padding: "3px 8px",
+    fontSize: "11px",
+    fontWeight: "700",
+  },
+  overdueBadge: {
+    background: "#dc2626",
+    color: "white",
+    borderRadius: "999px",
+    padding: "3px 8px",
+    fontSize: "11px",
+    fontWeight: "700",
+  },
+  archivedBadge: {
+    background: "#475569",
+    color: "white",
+    borderRadius: "999px",
+    padding: "3px 8px",
+    fontSize: "11px",
+    fontWeight: "700",
+  },
+  circle: {
+    width: "22px",
+    height: "22px",
+    border: "2px solid black",
+    borderRadius: "50%",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    fontSize: "14px",
+    fontWeight: "bold",
+    backgroundColor: "white",
+    color: "#0f172a",
+    padding: 0,
+  },
+  actions: {
+    display: "flex",
+    justifyContent: "flex-end",
+    gap: "8px",
+  },
+  actionButton: {
+    background: "#f8fafc",
+    color: "#0f172a",
+    border: "1px solid #cbd5e1",
+    padding: "6px 10px",
+    borderRadius: "8px",
+    cursor: "pointer",
+    fontWeight: "600",
+  },
+};