first commit

src/components/tarefas/SubtarefasList.tsx

@@ -0,0 +1,88 @@
+import React, { useState } from 'react';
+import { PlusIcon, XMarkIcon, CheckIcon } from '@heroicons/react/24/outline';
+import { SubTarefa } from '../../types/entities';
+
+interface SubtarefasListProps {
+  subtarefas: SubTarefa[];
+  onChange: (subtarefas: SubTarefa[]) => void;
+}
+
+export const SubtarefasList: React.FC<SubtarefasListProps> = ({ subtarefas, onChange }) => {
+  const [novaTarefa, setNovaTarefa] = useState('');
+
+  const adicionarSubtarefa = () => {
+    if (!novaTarefa.trim()) return;
+
+    onChange([
+      ...subtarefas,
+      {
+        id: Math.random().toString(),
+        titulo: novaTarefa,
+        concluida: false,
+        tarefaId: ''
+      }
+    ]);
+    setNovaTarefa('');
+  };
+
+  return (
+    <div className="space-y-4">
+      <div className="flex space-x-2">
+        <input
+          type="text"
+          value={novaTarefa}
+          onChange={(e) => setNovaTarefa(e.target.value)}
+          placeholder="Nova subtarefa"
+          className="flex-1 px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
+          onKeyPress={(e) => e.key === 'Enter' && adicionarSubtarefa()}
+        />
+        <button
+          type="button"
+          onClick={adicionarSubtarefa}
+          className="p-2 text-blue-600 hover:bg-blue-50 dark:text-blue-400 dark:hover:bg-blue-900/50 rounded-lg"
+        >
+          <PlusIcon className="h-5 w-5" />
+        </button>
+      </div>
+
+      <ul className="space-y-2">
+        {subtarefas.map((subtarefa, index) => (
+          <li 
+            key={subtarefa.id}
+            className="flex items-center justify-between p-2 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700"
+          >
+            <div className="flex items-center space-x-3">
+              <button
+                type="button"
+                onClick={() => {
+                  const novasSubtarefas = [...subtarefas];
+                  novasSubtarefas[index].concluida = !novasSubtarefas[index].concluida;
+                  onChange(novasSubtarefas);
+                }}
+                className={`h-5 w-5 rounded border ${
+                  subtarefa.concluida 
+                    ? 'bg-blue-600 border-blue-600 text-white' 
+                    : 'border-gray-300 dark:border-gray-600'
+                }`}
+              >
+                {subtarefa.concluida && <CheckIcon className="h-4 w-4" />}
+              </button>
+              <span className={`text-gray-900 dark:text-white ${
+                subtarefa.concluida ? 'line-through text-gray-500 dark:text-gray-400' : ''
+              }`}>
+                {subtarefa.titulo}
+              </span>
+            </div>
+            <button
+              type="button"
+              onClick={() => onChange(subtarefas.filter(s => s.id !== subtarefa.id))}
+              className="text-gray-400 hover:text-red-600 dark:text-gray-500 dark:hover:text-red-400"
+            >
+              <XMarkIcon className="h-5 w-5" />
+            </button>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};