ClaudeServerCard.jsx•4.2 kB
import { motion } from 'framer-motion'
import { EnvironmentBadge, DatabaseTypeBadge } from './ui'
import { detectDatabaseType, getDatabaseTypeDisplayName } from '../utils/databaseTypes'
const ClaudeServerCard = ({
server,
index,
activeEnvironment,
onRemove
}) => {
// Detect database type from server environment data
const databaseType = detectDatabaseType(server.env || {})
return (
<motion.div
className="bg-gray-50 border border-gray-100 rounded-lg p-3 hover:bg-gray-100 transition-all duration-200"
initial={{ opacity: 0, y: 10 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.2, delay: index * 0.05 }}
whileHover={{ y: -1 }}
>
{/* Header */}
<div className="flex items-start justify-between mb-2">
<div className="flex-1 min-w-0">
<div className="flex items-center gap-2 mb-1">
<div className="w-1.5 h-1.5 bg-green-500 rounded-full"></div>
<h4 className="text-sm font-medium text-gray-900 truncate">{server.name}</h4>
<DatabaseTypeBadge type={databaseType} size="xs" />
</div>
{activeEnvironment && (
<EnvironmentBadge environment={activeEnvironment} active size="xs" />
)}
</div>
<button
onClick={onRemove}
className="text-gray-400 hover:text-red-500 transition-colors duration-200 p-1 rounded hover:bg-white/60"
title="Remove from Claude"
>
<svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
{/* Connection Info */}
<div className="space-y-1">
<div className="flex items-center justify-between text-xs">
<span className="text-gray-500">Host:</span>
<span className="font-mono text-gray-700 bg-white/70 px-1.5 py-0.5 rounded text-xs truncate max-w-[100px]" title={server.env.HANA_HOST}>
{server.env.HANA_HOST}
</span>
</div>
{/* Show MDC-specific info when applicable */}
{databaseType === 'mdc_tenant' && server.env.HANA_DATABASE_NAME && (
<div className="flex items-center justify-between text-xs">
<span className="text-gray-500">Database:</span>
<span className="font-mono text-gray-700 bg-white/70 px-1.5 py-0.5 rounded text-xs truncate max-w-[100px]" title={server.env.HANA_DATABASE_NAME}>
{server.env.HANA_DATABASE_NAME}
</span>
</div>
)}
{databaseType === 'mdc_system' && server.env.HANA_INSTANCE_NUMBER && (
<div className="flex items-center justify-between text-xs">
<span className="text-gray-500">Instance:</span>
<span className="font-mono text-gray-700 bg-white/70 px-1.5 py-0.5 rounded text-xs">
{server.env.HANA_INSTANCE_NUMBER}
</span>
</div>
)}
<div className="flex items-center justify-between text-xs">
<span className="text-gray-500">Schema:</span>
<span className="font-mono text-gray-700 bg-white/70 px-1.5 py-0.5 rounded text-xs truncate max-w-[100px]" title={server.env.HANA_SCHEMA}>
{server.env.HANA_SCHEMA}
</span>
</div>
</div>
{/* Status */}
<div className="mt-2 pt-2 border-t border-gray-200">
<div className="flex items-center justify-between">
<span className="text-xs text-green-700 font-medium flex items-center gap-1">
<svg className="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
</svg>
Connected
</span>
<span className="text-xs text-gray-400">
Active
</span>
</div>
</div>
</motion.div>
)
}
export default ClaudeServerCard