100 lines
3.1 KiB
TypeScript
100 lines
3.1 KiB
TypeScript
import { PlusIcon, XMarkIcon, CheckIcon } from "@heroicons/react/24/outline";
|
|
import React, { useState } from "react";
|
|
|
|
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>
|
|
);
|
|
};
|