Ricardo Müller - React Take-Home Challenge: Task Manager App

src/App.tsx

@@ -4,11 +4,11 @@ import TaskManager from "./components/TaskManager";
 
 function App() {
   return (
-    <div className="min-h-screen bg-gray-100 p-4">
-      <header className="text-center mb-4">
-        <h1 className="text-3xl font-bold">Task Manager</h1>
+    <div className="min-h-screen bg-dark-gray-800 p-4">
+      <header className="flex lg:flex-row flex-col text-center mb-4 justify-center gap-4">
+        <img src="src\static\img\logo-fit.png" className="w-1/4 lg:w-1/2 max-w-xss mx-auto lg:mx-0"></img>
+        <h1 className="text-3xl font-bold text-white content-center">Task Manager</h1>
       </header>
-
       <TaskManager />
     </div>
   );

src/components/Button.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+
+const Button = ({ type, action, params, value, customClass}: any) => {
+    let mainColor = '';
+    let textColor = '';
+    let hoverColor = '';
+
+    switch(type) {
+        case 'submit':
+            mainColor = 'blue-500';
+            textColor = 'white';
+            hoverColor = 'blue-600';
+            break;
+        case 'cancel':
+            mainColor = 'gray-300';
+            textColor = 'gray-700';
+            hoverColor = 'gray-400';
+            break;
+        case 'delete':
+            mainColor = 'red-500';
+            textColor = 'white';
+            hoverColor = 'red-600';
+            break;
+    }
+
+    return (
+        <button onClick={() => action(params)}
+            type={type}
+            className={`bg-${mainColor} text-${textColor} hover:bg-${hoverColor} ${customClass}`} 
+            >
+                {value}
+        </button>
+    )
+};
+
+export default Button;

src/components/ConfirmationModal.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import Button from "./Button";
+
+const ConfirmationModal = ({ taskID, taskTitle, onClose, onConfirm }: any) => {
+    return (
+        <div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50">
+            <div className="bg-dark-gray-900 p-8 rounded-lg shadow-lg max-w-sm w-full">
+                <h2 className="text-xl text-white font-bold mb-4 text-center">Confirmation</h2>
+                <h2 className="text-l text-white text-center mb-4"> { 
+                        "Are you sure you want to delete the task '" + taskTitle + "' ?"
+                    }
+                </h2>
+
+                <div className="flex justify-around mt-8">
+                <Button
+                    type="cancel"
+                    customClass="px-4 py-2 rounded-lg"
+                    action={onClose}
+                    value="Cancel"
+                />
+                <Button
+                    type="delete"
+                    customClass="px-4 py-2 rounded-lg"
+                    action={onConfirm}
+                    params={taskID}
+                    value="Confirm"
+                />
+                </div>
+            </div>
+        </div>
+    )
+};
+
+export default ConfirmationModal;

src/components/Menu.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import MenuItem from "./MenuItem.";
+
+const Menu = ({ setFilter, setFilterName }: any) => {
+  return (
+    <nav>
+        <ul className="flex justify-around mb-4 border-b border-b-white">
+            <MenuItem 
+                value={'all'}
+                textValue={'All'}
+                setFilter={setFilter}
+                setFilterName={setFilterName}
+                />
+            <MenuItem 
+                value={'completed'}
+                textValue={'Completed'}
+                setFilter={setFilter}
+                setFilterName={setFilterName}
+                />
+            <MenuItem 
+                value={'pending'}
+                textValue={'Pending'}
+                setFilter={setFilter}
+                setFilterName={setFilterName}
+            />
+        </ul>
+    </nav>
+  );
+};
+
+export default Menu;

src/components/MenuItem..tsx

@@ -0,0 +1,10 @@
+import React from "react";
+
+
+const MenuItem = ({ value, textValue, setFilter, setFilterName }: any) => {
+  return (
+    <li className="filter-button text-white font-bold px-6 cursor-pointer w-full text-center" onClick={() => {setFilter(value); setFilterName(textValue)}} id={value + "Button"}>{textValue}</li>
+  );
+};
+
+export default MenuItem;

src/components/TaskItem.tsx

@@ -1,28 +1,35 @@
 import React from "react";
+import Button from "./Button";
 
 const TaskItem = ({ task, onDelete, onToggle }: any) => {
   return (
-    <li className="flex items-center justify-between border-b py-2">
-      <span
-        onClick={() => onToggle(task.id)}
-        className={`cursor-pointer ${
-          task.isCompleted ? "text-black" : "line-through text-green-500"
-        }`}
-      >
-        {task.title}
-      </span>
+    <li className="border-b border-b-dark-gray-600 py-0 mt-4 ">
+      <label htmlFor={"checkbox" + task.id} className="flex justify-between cursor-pointer">
+        <div className="flex gap-4 items-center">
+          <input type="checkbox" id={"checkbox" + task.id} name="option" 
+            className="hidden peer" 
+            checked={task.completed} 
+            onChange={() => onToggle(task.id)}
+          ></input>
+          <div className="w-6 h-6 border-2 border-gray-300 rounded-full peer-checked:bg-green-500 peer-checked:border-white 
+                          hover:border-green-400 focus:ring-2 focus:ring-green-500"></div>
+          <span
+            className={`cursor-pointer ${
+              task.completed ? "line-through text-gray-300" : "text-white"
+            }`}
+            >
+            {task.title}
+          </span>
+        </div>
 
-      <button
-        onClick={() => onDelete(task.id)}
-        style={{
-          backgroundColor: "red",
-          color: "white",
-          padding: "4px 8px",
-          borderRadius: "4px",
-        }}
-      >
-        Delete
-      </button>
+        <Button
+            type="delete"
+            customClass="rounded bg-red-500 text-white py-2 px-2 hover:bg-red-600"
+            action={onDelete}
+            params={task}
+            value="Delete"
+          />
+      </label>
     </li>
   );
 };