✨ feat: reversed task list

app/Components/TasksApp/AddTask.tsx

@@ -3,20 +3,14 @@ import { useState } from "react";
 export default function AddTask({ onAddTask }: { onAddTask: any }) {
   const [text, setText] = useState("");
   return (
-    <>
-      <input
-        placeholder="Add task"
-        value={text}
-        onChange={(e) => setText(e.target.value)}
-      />
-      <button
-        onClick={() => {
-          setText("");
-          onAddTask(text);
-        }}
-      >
-        Add
-      </button>
-    </>
+    <button
+      className="btn btn-primary btn-lg"
+      onClick={() => {
+        setText("");
+        onAddTask(text);
+      }}
+    >
+      Add Task
+    </button>
   );
 }

app/Components/TasksApp/TaskApp.tsx

@@ -35,7 +35,6 @@ export default function TaskApp() {
 
   return (
     <>
-      <h1>Day off in Kyoto</h1>
       <AddTask
         onAddTask={handleAddTask}
       />

app/Components/TasksApp/TaskList.tsx

@@ -11,8 +11,8 @@ export default function TaskList({
   onDeleteTask: any;
 }) {
   return (
-    <ul className="w-1/2 flex justify-center flex-col">
-      {tasks.map((task: any) => (
+    <ul className="w-1/2 mt-24 flex justify-center flex-col">
+      {[...tasks].reverse().map((task: any) => (
         <li className="flex flex-row w-full my-2" key={task.id}>
           <Task task={task} onChange={onChangeTask} onDelete={onDeleteTask} />
         </li>
@@ -44,7 +44,7 @@ function Task({
     audio.play();
   };
 
-  console.log("Task", task)
+  console.log("Task", task);
 
   const [isEditing, setIsEditing] = useState(task.isNew);
   let taskContent;

app/page.tsx

@@ -4,8 +4,7 @@ import TaskApp from "./Components/TasksApp/TaskApp";
 
 export default function Home() {
   return (
-    <main className="flex min-h-screen flex-col items-center p-24">
-      <SoundButton />
+    <main className="flex min-h-screen flex-col items-center p-24 pt-0">
       <TaskApp />
     </main>
   );