mirrors/mcphub
1
0
Fork 0
mirror of https://github.com/samanhappy/mcphub.git synced 2025-12-24 02:39:19 -05:00
Code Issues Packages Projects Releases Wiki Activity

feat: add DeleteDialog component for server removal confirmation; integrate with ServerCard

Browse Source
This commit is contained in:
samanhappy@qq.com
2025-04-01 22:36:05 +08:00
parent d7f185d93d
commit 440c2fe087
3 changed files with 48 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
public/components/DeleteDialog.jsx Normal file
View File

@@ -0,0 +1,32 @@
function DeleteDialog({ isOpen, onClose, onConfirm, serverName }) {
return (
<div className={`${isOpen ? 'block' : 'hidden'} fixed inset-0 bg-black bg-opacity-50 z-50`}>
<div className="fixed inset-0 flex items-center justify-center">
<div className="bg-white rounded-lg p-6 max-w-sm mx-auto">
<h3 className="text-lg font-medium leading-6 text-gray-900">Delete Server</h3>
<div className="mt-2">
<p className="text-sm text-gray-500">
Are you sure you want to delete server {serverName}? This action cannot be undone.
</p>
</div>
<div className="mt-4 flex justify-end space-x-3">
<button
onClick={onClose}
className="inline-flex justify-center px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 border border-gray-300 rounded-md hover:bg-gray-200"
>
Cancel
</button>
<button
onClick={onConfirm}
className="inline-flex justify-center px-4 py-2 text-sm font-medium text-white bg-red-600 border border-transparent rounded-md hover:bg-red-700"
>
Delete
</button>
</div>
</div>
</div>
</div>
);
}
module.exports = DeleteDialog;

1
public/index.html
View File

@@ -12,6 +12,7 @@
</head>
<body class="bg-gray-100">
<div id="root"></div>
<script type="text/babel" src="/components/DeleteDialog.jsx"></script>
<script type="text/babel" src="/js/app.js"></script>
</body>
</html>

18
public/js/app.js
View File

@@ -44,12 +44,16 @@ function ToolCard({ tool }) {
function ServerCard({ server, onRemove }) {
const [isExpanded, setIsExpanded] = useState(false);
const [showDeleteDialog, setShowDeleteDialog] = useState(false);
const handleRemove = (e) => {
e.stopPropagation();
if (confirm(`Are you sure you want to delete server ${server.name}?`)) {
onRemove(server.name);
}
setShowDeleteDialog(true);
};
const handleConfirmDelete = () => {
onRemove(server.name);
setShowDeleteDialog(false);
};
return (
@@ -72,6 +76,14 @@ function ServerCard({ server, onRemove }) {
<button className="text-gray-400 hover:text-gray-600">{isExpanded ? '▼' : '▶'}</button>
</div>
</div>
<DeleteDialog
isOpen={showDeleteDialog}
onClose={() => setShowDeleteDialog(false)}
onConfirm={handleConfirmDelete}
serverName={server.name}
/>
{isExpanded && server.tools && (
<div className="mt-6">
<h3 className="text-lg font-medium text-gray-900 mb-4">Available Tools</h3>