refactor: integrate delete album

src/components/delete-dialog-album.tsx

-import { useState } from 'react';
-import {
-  DropdownMenu,
-  DropdownMenuTrigger,
-  DropdownMenuContent,
-  DropdownMenuItem,
-} from "./ui/dropdown-menu";
-import { Button } from "./ui/button";
-import { useNavigate } from 'react-router-dom';
-
-export function AlbumDropdown() {
-  const [dropdownOpen, setDropdownOpen] = useState(false);
-
-  console.log(dropdownOpen);
-
-  const toggleDropdown = () => {
-    setDropdownOpen(prevState => !prevState);
-  };
+import axios from 'axios';
+import { useNavigate, useParams } from 'react-router-dom';
 
+const DeleteAlbumDialog = () => {
+  const { albumId } = useParams();
   const navigate = useNavigate();
-
-  const handleEditAlbum = () => {
-    console.log('Edit Album');
-    setDropdownOpen(false);
-    navigate('/1/edit-album');
-  }
-
   const handleDeleteAlbum = () => {
-    console.log('Delete Album');
-    setDropdownOpen(false);
-    navigate('/1/delete-album');
+    try {
+      axios.delete(`http://localhost:3000/api/premium-album/${albumId}`);
+    } catch (error) {
+      console.error('Error deleting album:', error);
+    }
+  };
+
+  const handleCancel = () => {
+    navigate(-1);
   };
 
   return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button variant="outline" onClick={toggleDropdown} className='bg-zinc-800 border-none text-white rounded h-3 pb-5'>
-          ...
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent className="w-40 text-white bg-black border-grey-200" style={{ position: 'absolute', right: -20 }}>
-        <DropdownMenuItem onClick={handleEditAlbum} className='hover:bg-zinc-800'>
-          Edit Album
-        </DropdownMenuItem>
-        <DropdownMenuItem onClick={handleDeleteAlbum}>
-          Delete Album
-        </DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
+    <>
+      {(
+        <div className="fixed inset-0 overflow-y-auto z-50">
+          <div className="flex items-center justify-center min-h-screen">
+            <div className="fixed inset-0 transition-opacity">
+              <div className="absolute inset-0 bg-gray-500 opacity-75"></div>
+            </div>
+            <div className="bg-white rounded p-8 z-10">
+              <div className="mb-4 text-lg font-semibold">Delete Album Confirmation</div>
+              <div className="mb-4">Are you sure you want to delete this Album?</div>
+              <div className="flex justify-end">
+                <button
+                  onClick={handleCancel}
+                  className="px-4 py-2 mr-2 bg-gray-300 hover:bg-gray-400 rounded"
+                >
+                  Cancel
+                </button>
+                <button
+                  onClick={handleDeleteAlbum}
+                  className="px-4 py-2 bg-red-500 hover:bg-red-600 text-white rounded"
+                >
+                  Delete
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
   );
-}
+};
+
+export default DeleteAlbumDialog;