Modify delete popup to accept type to adjust popup and toast text

admin-portal-frontend/src/app/all-page/page.tsx

@@ -116,11 +116,7 @@ export default function CategoriesPage() {
         </div>
         <PageContainer items={categories} onDeletePage={onDeletePage}></PageContainer>
         {showToast && (
-          <Toast
-            backgroundColor={"#000000"}
-            message={"Category deleted"}
-            onClose={handleCloseToast}
-          />
+          <Toast backgroundColor={"#000000"} message={"Page deleted"} onClose={handleCloseToast} />
         )}
       </div>
     </div>

admin-portal-frontend/src/app/components/CategoryContainer.tsx

@@ -83,7 +83,11 @@ const CategoryItem: React.FC<CategoryItemProps> = ({ id, title, pages, onDeleteC
         </button>
       </td>
       {popupVisible ? (
-        <DeleteConfirmationPopup onDelete={handleConfirmDelete} onCancel={handleCancelDelete} />
+        <DeleteConfirmationPopup
+          onDelete={handleConfirmDelete}
+          onCancel={handleCancelDelete}
+          type={"category"}
+        />
       ) : null}
     </tr>
   );

admin-portal-frontend/src/app/components/DeletePopup.tsx

@@ -3,18 +3,20 @@ import React from "react";
 import CloseIcon from "../icons/close.svg";
 
 type IconProps = {
-  'content-type': string,
-  src: string
-}
+  "content-type": string;
+  src: string;
+};
 
 type DeleteConfirmationPopupProps = {
   onDelete: () => void;
   onCancel: () => void;
+  type: String;
 };
 
 const DeleteConfirmationPopup: React.FC<DeleteConfirmationPopupProps> = ({
   onDelete,
   onCancel,
+  type,
 }) => {
   return (
     <div className="fixed top-0 left-0 w-full h-full flex items-center justify-center bg-gray-800 bg-opacity-50 z-50">
@@ -26,10 +28,10 @@ const DeleteConfirmationPopup: React.FC<DeleteConfirmationPopupProps> = ({
           <h1 className="text-xl sm:text-2xl text-[#182B49] font-bold">
             Are you sure you want to delete
             <br />
-            this category?
+            this {type}?
           </h1>
           <p className="my-4 text-[#182B49]">
-            This category cannot be restored and will not be saved.
+            This {type} cannot be restored and will not be saved.
           </p>
           <div className="flex justify-evenly mt-4 sm:mt-6">
             <button

admin-portal-frontend/src/app/components/PageContainer.tsx

@@ -84,7 +84,11 @@ const PageItem: React.FC<PageItemProps> = ({ id, page, categoryId, title, onDele
           />
         </button>
         {popupVisible ? (
-          <DeleteConfirmationPopup onDelete={handleConfirmDelete} onCancel={handleCancelDelete} />
+          <DeleteConfirmationPopup
+            onDelete={handleConfirmDelete}
+            onCancel={handleCancelDelete}
+            type={"page"}
+          />
         ) : null}
       </td>
     </tr>