[V0_FILE]typescriptreact:file="app/page.tsx" import TodoList from "@/components/todo-list" export default function Home() { return (

Todo App

) } [V0_FILE]typescriptreact:file="components/todo-list.tsx" "use client" import type React from "react" import { useState } from "react" import { PlusCircle } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import TodoItem from "@/components/todo-item" type Todo = { id: string text: string completed: boolean } export default function TodoList() { const [todos, setTodos] = useState([]) const [newTodo, setNewTodo] = useState("") const addTodo = (e: React.FormEvent) => { e.preventDefault() if (newTodo.trim() === "") return const todo: Todo = { id: Date.now().toString(), text: newTodo, completed: false, } setTodos([...todos, todo]) setNewTodo("") } const toggleTodo = (id: string) => { setTodos(todos.map((todo) => (todo.id === id ? { ...todo, completed: !todo.completed } : todo))) } const deleteTodo = (id: string) => { setTodos(todos.filter((todo) => todo.id !== id)) } return ( My Tasks

{todos.length === 0 ? (

No tasks yet. Add one above!

) : ( todos.map((todo) => ) )}

) } [V0_FILE]typescriptreact:file="components/todo-item.tsx" "use client" import { Check, Trash2 } from "lucide-react" import { Button } from "@/components/ui/button" import { cn } from "@/lib/utils" type Todo = { id: string text: string completed: boolean } interface TodoItemProps { todo: Todo onToggle: (id: string) => void onDelete: (id: string) => void } export default function TodoItem({ todo, onToggle, onDelete }: TodoItemProps) { return (

{todo.text}

) }

About

Tags

Share

About

Tags

Share

More from jorgezreik

More Templates Like This

About

Tags

Share

About

Tags

Share

More from jorgezreik

More Templates Like This