modal added

Author: Rankvet-Developer

src/App.js

@@ -1,24 +1,27 @@
 import React from 'react';
-import Footer from './components/Footer';
-import Header from './components/Header';
-import Navbar from './components/Navbar';
-import TodoList from './components/TodoList';
+// import Footer from './components/Footer';
+// import Header from './components/Header';
+// import Navbar from './components/Navbar';
+// import TodoList from './components/TodoList';
+import Modal from './components/ui/Modal';
 
 export default function App() {
   return (
     <div className="grid place-items-center bg-blue-100 h-screen px-6 font-sans">
-         <Navbar />
+         {/* <Navbar /> */}
 
         <div className="w-full max-w-3xl shadow-lg rounded-lg p-6 bg-white">
-          <Header />
+          {/* <Header /> */}
 
           <hr className="mt-4" />
 
-          <TodoList />
+          <Modal/>
+
+          {/* <TodoList /> */}
 
           <hr className="mt-4" />
 
-          <Footer />
+          {/* <Footer /> */}
         </div>
     </div>
   )

src/components/TodoList.js

@@ -27,28 +27,6 @@ export default function TodoList() {
                     ))
     }
 
-    // const filterByStatus = (todo) => {
-    //     const { status } = filters;
-    //     switch (status) {
-    //         case "Complete":
-    //             return todo.completed;
-
-    //         case "Incomplete":
-    //             return !todo.completed;
-
-    //         default:
-    //             return true;
-    //     }
-    // };
-
-    // const filterByColors = (todo) => {
-    //     const { colors } = filters;
-    //     if (colors.length > 0) {
-    //         return colors.includes(todo?.color);
-    //     }
-    //     return true;
-    // };
-
     return (
         <div className="mt-2 text-gray-700 text-sm max-h-[300px] overflow-y-auto">
             {content}

src/components/ui/Modal.js

@@ -0,0 +1,33 @@
+import React from 'react'
+
+const CancelSvg = () => (
+    <>
+        <svg aria-hidden="true" className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fillRule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clipRule="evenodd"></path></svg>
+        <span className="sr-only">Close modal</span>
+    </>
+)
+
+export default function Modal() {
+  return (
+        <div className="bg-slate-800 bg-opacity-50 flex justify-center items-center absolute top-0 right-0 bottom-0 left-0">
+            <div className="relative p-4 w-full max-w-md h-full md:h-auto">
+                <div className="relative bg-white rounded-lg shadow dark:bg-gray-700">
+                    <button type="button" className="absolute top-3 right-2.5 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-800 dark:hover:text-white" data-modal-toggle="authentication-modal">
+                        <CancelSvg/>
+                    </button>
+                    <div className="py-6 px-6 lg:px-8">
+                        <h3 className="mb-4 text-xl font-medium text-gray-900 dark:text-white">Update the todo</h3>
+                        <form className="space-y-6">
+                            <div>
+                                {/* <label className="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">Your email</label> */}
+                                <input type="text" name="email" className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white" placeholder="name@company.com" required/>
+
+                                <input className='px-4 py-2 bg-sky-500 rounded-full text-white' type="submit" value="update" />
+                            </div>
+                        </form>
+                    </div>
+                </div>
+            </div>
+        </div> 
+  )
+}