gabriel/proxmox_choose_page
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

qs

Browse source
This commit is contained in:
Gabriel Peron 2025-03-23 03:41:05 +01:00
parent d7737ef3b9
commit 6cbdcb81ff
1 changed files with 52 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

59
src/components/ServerCard.tsx
View file

@ -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"
>