From e6bb2b2e99cea1c66697cc3bccabc35b3bb683b7 Mon Sep 17 00:00:00 2001
From: ismailbenlaredj <yako_is@yahoo.fr>
Date: Sun, 5 Nov 2023 19:56:33 +0100
Subject: [PATCH] feat(delete item): add delete item warning and confiramtion
 component

---
 src/components/delete-warning/index.jsx | 46 +++++++++++++++++++++++++
 1 file changed, 46 insertions(+)
 create mode 100644 src/components/delete-warning/index.jsx

diff --git a/src/components/delete-warning/index.jsx b/src/components/delete-warning/index.jsx
new file mode 100644
index 0000000..6e2635e
--- /dev/null
+++ b/src/components/delete-warning/index.jsx
@@ -0,0 +1,46 @@
+import { useState } from "react";
+
+import { deleteDocData } from "@/lib/firebase/firestoreFunctions";
+
+import Button from "../button/Button";
+
+export default function DeleteWarning({
+    setDeleteWarningItem,
+    deleteWarningItem,
+    setItems,
+    items,
+}) {
+    const [isLoading, setIsLoading] = useState(false);
+    const handleDelete = async () => {
+        setIsLoading(true);
+        await deleteDocData("items", deleteWarningItem);
+        setItems(items.filter((item) => item.id !== deleteWarningItem));
+        setDeleteWarningItem(false);
+        setIsLoading(false);
+    };
+    return (
+        <div className='fixed w-full h-full inset-0 z-40 flex justify-center items-center overflow-hidden  transition-opacity'>
+            <div className='absolute  w-full h-full bg-[black] opacity-80 right-0 top-0'></div>
+            <div className='relative text-white  py-12 px-16 bg-[#00000059]  rounded-lg z-60 shadow-xl border border-slate-200 '>
+                <p> Do you want to delete this item?</p>
+                <div className='flex gap-9 mt-10 w-full justify-center'>
+                    <Button
+                        className={`${isLoading ? "bg-slate-300 " : "bg-red"}`}
+                        onClick={handleDelete}
+                        disabled={isLoading}
+                    >
+                        Delete
+                    </Button>
+                    <Button
+                        onClick={() => setDeleteWarningItem(false)}
+                        variant='outlinePrimary'
+                        className={`${isLoading ? "bg-slate-300 " : ""}`}
+                        disabled={isLoading}
+                    >
+                        Cancel
+                    </Button>
+                </div>
+            </div>
+        </div>
+    );
+}