[V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" "use client" import type React from "react" import { ThemeProvider, createTheme } from "@mui/material/styles" import CssBaseline from "@mui/material/CssBaseline" const theme = createTheme({ palette: { mode: "light", primary: { main: "#1976d2", }, }, }) export default function RootLayout({ children }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" "use client" import React, { useState } from "react" import { Container, Typography, Box } from "@mui/material" import TodoForm from "./components/TodoForm" import TodoList from "./components/TodoList" import TodoCounter from "./components/TodoCounter" interface Todo { id: number text: string completed: boolean } export default function Home() { const [todos, setTodos] = useState([]) const addTodo = (text: string) => { const newTodo: Todo = { id: Date.now(), text, completed: false, } setTodos([...todos, newTodo]) } const toggleTodo = (id: number) => { setTodos(todos.map((todo) => (todo.id === id ? { ...todo, completed: !todo.completed } : todo))) } const editTodo = (id: number, newText: string) => { setTodos(todos.map((todo) => (todo.id === id ? { ...todo, text: newText } : todo))) } const deleteTodo = (id: number) => { setTodos(todos.filter((todo) => todo.id !== id)) } const completedTodos = todos.filter((todo) => todo.completed).length const uncompletedTodos = todos.length - completedTodos return ( Todo App ) } [V0_FILE]typescriptreact:file="app/components/TodoForm.tsx" isEdit="true" isQuickEdit="true" import type React from "react" import { useState } from "react" import { TextField, Button, Box } from "@mui/material" interface TodoFormProps { addTodo: (text: string) => void } const TodoForm: React.FC = ({ addTodo }) => { const [text, setText] = useState("") const handleSubmit = (e: React.FormEvent) => { e.preventDefault() if (text.trim()) { addTodo(text) setText("") } } return ( ) } export default TodoForm [V0_FILE]typescriptreact:file="app/components/TodoList.tsx" isEdit="true" isQuickEdit="true" import type React from "react" import { useState } from "react" import { List, ListItem, ListItemIcon, ListItemText, Checkbox, IconButton, TextField } from "@mui/material" import { Edit as EditIcon, Delete as DeleteIcon, Save as SaveIcon } from "@mui/icons-material" interface Todo { id: number text: string completed: boolean } interface TodoListProps { todos: Todo[] toggleTodo: (id: number) => void editTodo: (id: number, newText: string) => void deleteTodo: (id: number) => void } const TodoList: React.FC = ({ todos, toggleTodo, editTodo, deleteTodo }) => { const [editingId, setEditingId] = useState(null) const [editText, setEditText] = useState("") const handleEdit = (id: number, text: string) => { setEditingId(id) setEditText(text) } const handleSave = (id: number) => { editTodo(id, editText) setEditingId(null) } return ( {todos.map((todo) => ( {editingId === todo.id ? ( handleSave(todo.id)}> ) : ( handleEdit(todo.id, todo.text)}> )} deleteTodo(todo.id)}> } > toggleTodo(todo.id)} /> {editingId === todo.id ? ( setEditText(e.target.value)} fullWidth variant="standard" /> ) : ( )} ))} ) } export default TodoList [V0_FILE]typescriptreact:file="app/components/TodoCounter.tsx" isEdit="true" isQuickEdit="true" import type React from "react" import { Typography, Box } from "@mui/material" interface TodoCounterProps { completed: number uncompleted: number } const TodoCounter: React.FC = ({ completed, uncompleted }) => { return ( Completed: {completed} | Uncompleted: {uncompleted} ) } export default TodoCounter

About

Tags

Share

About

Tags

Share

More from derekwu

More Templates Like This

About

Tags

Share

About

Tags

Share

More from derekwu

More Templates Like This