✨ feat: added delete sound, add task on enter and drop task if leaved…

… empty

app/Components/TasksApp/TaskList.tsx

@@ -44,6 +44,13 @@ function Task({
     audio.play();
   };
 
+  const playSoundDelete = () => {
+    console.log("Playing sound");
+
+    const audio = new Audio("/sounds/delete.mp3");
+    audio.play();
+  }
+
   console.log("Task", task);
 
   const [isEditing, setIsEditing] = useState(task.isNew);
@@ -52,15 +59,27 @@ function Task({
     taskContent = (
       <>
         <input
-          className="input input-bordered col-span-3"
+          className="input input-bordered col-span-3 font-semibold text-xl"
           value={task.text}
           onChange={(e) => {
             onChange({
               ...task,
               text: e.target.value,
             });
           }}
-          onBlur={() => setIsEditing(false)}
+          onBlur={(e) => {
+            setIsEditing(false);
+
+            //If empty onLeave, drop the task
+            if (e.target.value === "") {
+              onDelete(task.id);
+            }
+          }}
+          onKeyDown={(e) => {
+            if (e.key === "Enter") {
+              (e.target as HTMLInputElement).blur();
+            }
+          }}
           autoFocus
         />
       </>
@@ -69,7 +88,7 @@ function Task({
     taskContent = (
       <>
         <span
-          className="col-span-3 self-center align-middle text-start w-full min-h-6"
+          className="col-span-3 self-center align-middle text-start w-full min-h-12 font-semibold text-xl items-center inline-flex"
           onDoubleClick={() => setIsEditing(true)}
         >
           {task.text}
@@ -98,7 +117,10 @@ function Task({
       {taskContent}
 
       <button
-        onClick={() => onDelete(task.id)}
+        onClick={() => {
+          onDelete(task.id);
+          playSoundDelete();
+        }}
         className="btn btn-md btn-circle btn-outline btn-error self-end justify-self-end"
       >
         <TrashIcon />

app/_lib/icons/TrashIcon.tsx

@@ -5,9 +5,9 @@ export default function TrashIcon() {
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
-      stroke-width="2"
-      stroke-linecap="round"
-      stroke-linejoin="round"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
       className="lucide lucide-trash-2 h-6 w-6"
     >
       <path d="M3 6h18" />