confrim before delete a workspace or a project

src/components/DeleteNameConfirmModal.tsx

@@ -0,0 +1,74 @@
+import { FC, useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import Button from "./Button";
+import DefaulModal from "./DefaulModal";
+import Input from "./Input";
+
+type Props = {
+  isOpen: boolean;
+  close: () => void;
+  onConfirm: () => void;
+  isLoading?: boolean;
+  itemName: string;
+  message?: string;
+};
+
+const DeleteNameConfirmModal: FC<Props> = ({
+  isOpen,
+  close,
+  onConfirm,
+  isLoading = false,
+  itemName,
+  message,
+}) => {
+  const { t } = useTranslation("global");
+  const [typedName, setTypedName] = useState("");
+
+  useEffect(() => {
+    if (!isOpen) {
+      setTypedName("");
+    }
+  }, [isOpen]);
+
+  const isNameMatched = typedName.trim() === itemName.trim();
+
+  return (
+    <DefaulModal
+      open={isOpen}
+      close={close}
+      title_header={t("confrim.subject")}
+      isHeader
+    >
+      <div className="mt-6">
+        <div className="text-sm text-center">
+          {message ?? t("taskmanager.delete_confirm_message", { name: itemName })}
+        </div>
+
+        <div className="mt-5">
+          <Input
+            value={typedName}
+            onChange={(e) => setTypedName(e.target.value)}
+            placeholder={t("taskmanager.delete_confirm_placeholder")}
+            className="text-center"
+          />
+        </div>
+
+        <div className="flex gap-4 justify-center mt-10">
+          <Button
+            label={t("confrim.yes")}
+            onClick={onConfirm}
+            isLoading={isLoading}
+            disabled={!isNameMatched}
+          />
+          <Button
+            label={t("confrim.cancel")}
+            className="bg-transparent text-black border border-primary"
+            onClick={close}
+          />
+        </div>
+      </div>
+    </DefaulModal>
+  );
+};
+
+export default DeleteNameConfirmModal;