Refactor: Task Manager

.gitignore

@@ -1,2 +1,3 @@
 node_modules
-dist
+dist
+.vscode

package.json

@@ -8,17 +8,18 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@headlessui/react": "^2.2.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
-    "typescript": "^4.6.0",
-    "vite": "^4.0.0",
     "@vitejs/plugin-react": "^3.0.0",
-    "tailwindcss": "^3.0.0",
+    "autoprefixer": "^10.0.0",
     "postcss": "^8.0.0",
-    "autoprefixer": "^10.0.0"
+    "tailwindcss": "^3.0.0",
+    "typescript": "^4.6.0",
+    "vite": "^4.0.0"
   }
 }

src/App.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import TaskManager from "./components/TaskManager";
+import { TaskManager } from "./components/TaskManager";
 
 function App() {
   return (

src/components/ConfirmationModal/ConfirmationModal.tsx

@@ -0,0 +1,57 @@
+import { Dialog, DialogBackdrop, DialogPanel, DialogTitle } from "@headlessui/react";
+import React from "react";
+
+import { ConfirmationModalProps } from "./ConfirmationModal.types";
+
+export const ConfirmationModal = ({ open, onOpen, onDelete }: ConfirmationModalProps) => {
+  return (
+    <Dialog open={open} onClose={onOpen} className="relative z-10">
+      <DialogBackdrop
+        transition
+        className="fixed inset-0 bg-gray-500/75 transition-opacity data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in"
+      />
+
+      <div className="fixed inset-0 z-10 w-screen overflow-y-auto">
+        <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
+          <DialogPanel
+            transition
+            className="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all data-closed:translate-y-4 data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in sm:my-8 sm:w-full sm:max-w-lg data-closed:sm:translate-y-0 data-closed:sm:scale-95"
+          >
+            <div className="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+              <div className="sm:flex sm:items-start">
+                <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+                  <DialogTitle as="h3" className="text-base font-semibold text-gray-900">
+                    Delete task
+                  </DialogTitle>
+                  <div className="mt-2">
+                    <p className="text-sm text-gray-500">
+                      Are you sure you want to delete this task? <br />
+                      This action cannot be undone.
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div className="bg-gray-50 px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6">
+              <button
+                type="button"
+                onClick={onDelete}
+                className="inline-flex w-full justify-center rounded-md bg-red-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-red-500 sm:ml-3 sm:w-auto"
+              >
+                Delete
+              </button>
+              <button
+                type="button"
+                data-autofocus
+                onClick={() => onOpen(false)}
+                className="mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 ring-1 shadow-xs ring-gray-300 ring-inset hover:bg-gray-50 sm:mt-0 sm:w-auto"
+              >
+                Cancel
+              </button>
+            </div>
+          </DialogPanel>
+        </div>
+      </div>
+    </Dialog>
+  );
+};

src/components/ConfirmationModal/ConfirmationModal.types.ts

@@ -0,0 +1,5 @@
+export interface ConfirmationModalProps {
+  open: boolean;
+  onOpen: (open: boolean) => void;
+  onDelete: () => void;
+}

src/components/ConfirmationModal/index.ts

@@ -0,0 +1 @@
+export * from './ConfirmationModal';

src/components/Filter/Filter.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+
+import { FilterProps } from "./Filter.types";
+
+export const Filter = ({ statuses, onFilter, currentStatus }: FilterProps) => {
+  return (
+    <div className="flex justify-around mb-4 gap-3">
+      {statuses.map((status) => (
+        <button
+          onClick={() => onFilter(status)}
+          key={status}
+          className={`text-gray-700 capitalize flex-1 rounded py-2 hover:opacity-90 ${
+            currentStatus === status ? "font-bold bg-gray-300" : "border-gray-300 border"
+          }`}
+        >
+          {status}
+        </button>
+      ))}
+    </div>
+  );
+};

src/components/Filter/Filter.types.ts

@@ -0,0 +1,5 @@
+export interface FilterProps {
+  currentStatus: string;
+  statuses: string[];
+  onFilter: (filter: string) => void;
+}

src/components/Filter/index.ts

@@ -0,0 +1 @@
+export * from './Filter';