Create initial version of a todo app with basic functionality such as…

… adding, editing, and deleting tasks.

src/pages/Index.jsx

@@ -1,20 +1,85 @@
-// Update this page (the content is just a fallback if you fail and example)
-// Use chakra-ui
-import { Container, Text, VStack } from "@chakra-ui/react";
-
-// Example of using react-icons
-// import { FaRocket } from "react-icons/fa";
-// <IconButton aria-label="Add" icon={<FaRocket />} size="lg" />; // IconButton would also have to be imported from chakra
+import React, { useState } from 'react';
+import { Container, VStack, HStack, Input, Button, Text, IconButton, Checkbox } from "@chakra-ui/react";
+import { FaEdit, FaTrash } from "react-icons/fa";
 
 const Index = () => {
+  const [tasks, setTasks] = useState([]);
+  const [newTask, setNewTask] = useState("");
+  const [editingTask, setEditingTask] = useState(null);
+  const [editingText, setEditingText] = useState("");
+
+  const addTask = () => {
+    if (newTask.trim() !== "") {
+      setTasks([...tasks, { text: newTask, completed: false }]);
+      setNewTask("");
+    }
+  };
+
+  const deleteTask = (index) => {
+    const newTasks = tasks.filter((_, i) => i !== index);
+    setTasks(newTasks);
+  };
+
+  const editTask = (index) => {
+    setEditingTask(index);
+    setEditingText(tasks[index].text);
+  };
+
+  const saveTask = (index) => {
+    const newTasks = tasks.map((task, i) => (i === index ? { ...task, text: editingText } : task));
+    setTasks(newTasks);
+    setEditingTask(null);
+    setEditingText("");
+  };
+
+  const toggleComplete = (index) => {
+    const newTasks = tasks.map((task, i) => (i === index ? { ...task, completed: !task.completed } : task));
+    setTasks(newTasks);
+  };
+
   return (
-    <Container centerContent maxW="container.md" height="100vh" display="flex" flexDirection="column" justifyContent="center" alignItems="center">
-      <VStack spacing={4}>
-        <Text fontSize="2xl">Your Blank Canvas</Text>
-        <Text>Chat with the agent to start making edits.</Text>
+    <Container centerContent maxW="container.md" py={10}>
+      <VStack spacing={4} width="100%">
+        <HStack width="100%">
+          <Input
+            placeholder="Add a new task"
+            value={newTask}
+            onChange={(e) => setNewTask(e.target.value)}
+          />
+          <Button onClick={addTask} colorScheme="teal">Add Task</Button>
+        </HStack>
+        <VStack spacing={2} width="100%">
+          {tasks.map((task, index) => (
+            <HStack key={index} width="100%" justifyContent="space-between">
+              <Checkbox isChecked={task.completed} onChange={() => toggleComplete(index)}>
+                {editingTask === index ? (
+                  <Input
+                    value={editingText}
+                    onChange={(e) => setEditingText(e.target.value)}
+                    onBlur={() => saveTask(index)}
+                  />
+                ) : (
+                  <Text as={task.completed ? "s" : ""}>{task.text}</Text>
+                )}
+              </Checkbox>
+              <HStack>
+                <IconButton
+                  icon={<FaEdit />}
+                  onClick={() => editTask(index)}
+                  aria-label="Edit Task"
+                />
+                <IconButton
+                  icon={<FaTrash />}
+                  onClick={() => deleteTask(index)}
+                  aria-label="Delete Task"
+                />
+              </HStack>
+            </HStack>
+          ))}
+        </VStack>
       </VStack>
     </Container>
   );
 };
 
-export default Index;
+export default Index;