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 LucideIcons component for Chevron icons; update ToolCard and ServerCard to use new icons

Browse Source
This commit is contained in:
samanhappy@qq.com
2025-04-01 22:52:57 +08:00
parent 440c2fe087
commit 6a9ddd14e0
3 changed files with 53 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
public/components/LucideIcons.jsx Normal file
View File

@@ -0,0 +1,41 @@
// Simple implementation of Chevron icons without relying on the Lucide library
const ChevronDown = ({ size = 24, className = "" }) => (
<svg
xmlns="http://www.w3.org/2000/svg"
width={size}
height={size}
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
className={`lucide lucide-chevron-down ${className}`}
>
<path d="m6 9 6 6 6-6"/>
</svg>
);
const ChevronRight = ({ size = 24, className = "" }) => (
<svg
xmlns="http://www.w3.org/2000/svg"
width={size}
height={size}
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
className={`lucide lucide-chevron-right ${className}`}
>
<path d="m9 18 6-6-6-6"/>
</svg>
);
// Make icons available globally
window.LucideIcons = {
ChevronDown,
ChevronRight
};

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/LucideIcons.jsx"></script>
<script type="text/babel" src="/components/DeleteDialog.jsx"></script>
<script type="text/babel" src="/js/app.js"></script>
</body>

13
public/js/app.js
View File

@@ -1,4 +1,5 @@
const { useState, useEffect, Fragment } = React;
const { ChevronDown, ChevronRight } = window.LucideIcons || {};
function Badge({ status }) {
const colors = {
@@ -25,7 +26,11 @@ function ToolCard({ tool }) {
onClick={() => setIsExpanded(!isExpanded)}
>
<h3 className="text-lg font-medium text-gray-900">{tool.name}</h3>
<button className="text-gray-400 hover:text-gray-600">{isExpanded ? '▼' : '▶'}</button>
<button className="text-gray-400 hover:text-gray-600">
{isExpanded ?
(ChevronDown ? <ChevronDown size={18} /> : '▼') :
(ChevronRight ? <ChevronRight size={18} /> : '▶')}
</button>
</div>
{isExpanded && (
<div className="mt-4">
@@ -73,7 +78,11 @@ function ServerCard({ server, onRemove }) {
>
Delete
</button>
<button className="text-gray-400 hover:text-gray-600">{isExpanded ? '▼' : '▶'}</button>
<button className="text-gray-400 hover:text-gray-600">
{isExpanded ?
(ChevronDown ? <ChevronDown size={18} /> : '▼') :
(ChevronRight ? <ChevronRight size={18} /> : '▶')}
</button>
</div>
</div>