From 6cbdcb81ffcac6f59466f092ed20a5de373b5bbd Mon Sep 17 00:00:00 2001
From: gabriel <gabriel@nazuna.ovh>
Date: Sun, 23 Mar 2025 03:41:05 +0100
Subject: [PATCH] qs

---
 src/components/ServerCard.tsx | 59 ++++++++++++++++++++++++++++++-----
 1 file changed, 52 insertions(+), 7 deletions(-)

diff --git a/src/components/ServerCard.tsx b/src/components/ServerCard.tsx
index acf5098..c191540 100644
--- a/src/components/ServerCard.tsx
+++ b/src/components/ServerCard.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
-import { Server, Cpu, MemoryStick as Memory, Trash2, ExternalLink } from 'lucide-react';
+import React, { useState } from 'react';
+import { Server, Cpu, MemoryStick as Memory, Trash2, ExternalLink, AlertCircle } from 'lucide-react';
 import type { Server as ServerType } from '../types';
 
 interface ServerCardProps {
@@ -8,18 +8,66 @@ interface ServerCardProps {
 }
 
 export function ServerCard({ server, onDelete }: ServerCardProps) {
+  const [showConfirmation, setShowConfirmation] = useState(false);
+
   const handleProxmoxClick = () => {
     window.open(server.proxmox_url, '_blank');
   };
 
+  const handleDeleteClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    setShowConfirmation(true);
+  };
+
+  const handleConfirmDelete = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    onDelete(server.id);
+    setShowConfirmation(false);
+  };
+
+  const handleCancelDelete = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    setShowConfirmation(false);
+  };
+
   const totalCores = server.cpus.reduce((sum, cpu) => sum + cpu.cores, 0);
   const firstCpu = server.cpus[0];
 
   return (
     <div 
-      className="bg-gray-800/50 backdrop-blur-sm rounded-xl p-6 hover:bg-gray-700/50 transition-all duration-300 cursor-pointer transform hover:scale-102 hover:shadow-xl hover:shadow-purple-500/10 border border-gray-700/50 animate-fadeIn hover:animate-glow"
+      className="bg-gray-800/50 backdrop-blur-sm rounded-xl p-6 hover:bg-gray-700/50 transition-all duration-300 cursor-pointer transform hover:scale-102 hover:shadow-xl hover:shadow-purple-500/10 border border-gray-700/50 animate-fadeIn hover:animate-glow relative"
       onClick={handleProxmoxClick}
     >
+      {showConfirmation && (
+        <div 
+          className="absolute inset-0 bg-gray-900/95 backdrop-blur-sm rounded-xl p-6 flex flex-col items-center justify-center gap-4 z-10 animate-fadeIn"
+          onClick={(e) => e.stopPropagation()}
+        >
+          <AlertCircle size={48} className="text-red-400 animate-pulse" />
+          <h4 className="text-xl font-semibold text-white text-center">
+            Delete {server.name}?
+          </h4>
+          <p className="text-gray-400 text-center max-w-sm">
+            This action cannot be undone. The server will be removed from the dashboard.
+          </p>
+          <div className="flex gap-3 mt-2">
+            <button
+              onClick={handleConfirmDelete}
+              className="bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-lg transition-colors duration-200 flex items-center gap-2"
+            >
+              <Trash2 size={16} />
+              Delete
+            </button>
+            <button
+              onClick={handleCancelDelete}
+              className="bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded-lg transition-colors duration-200"
+            >
+              Cancel
+            </button>
+          </div>
+        </div>
+      )}
+
       <div className="flex items-center justify-between mb-6">
         <h3 className="text-xl font-semibold text-white flex items-center gap-2 group">
           <Server className="text-purple-400 group-hover:text-purple-300 transition-colors animate-pulse" size={24} />
@@ -27,10 +75,7 @@ export function ServerCard({ server, onDelete }: ServerCardProps) {
           <ExternalLink size={16} className="text-purple-400 group-hover:text-purple-300 transition-colors" />
         </h3>
         <button
-          onClick={(e) => {
-            e.stopPropagation();
-            onDelete(server.id);
-          }}
+          onClick={handleDeleteClick}
           className="text-gray-400 hover:text-red-400 transition-colors p-2 hover:bg-red-400/10 rounded-lg"
           title="Delete server"
         >