0b37c5e692
Website (14 monoliths split): - compliance/page.tsx (1,519 → 9), docs/audit (1,262 → 20) - quality (1,231 → 16), alerts (1,203 → 10), docs (1,202 → 11) - i18n.ts (1,173 → 8 language files) - unity-bridge (1,094 → 12), backlog (1,087 → 6) - training (1,066 → 8), rag (1,063 → 8) - Deleted index_original.ts (4,899 LOC dead backup) Studio-v2 (5 monoliths split): - meet/page.tsx (1,481 → 9), messages (1,166 → 9) - AlertsB2BContext.tsx (1,165 → 5 modules) - alerts-b2b/page.tsx (1,019 → 6), korrektur/archiv (1,001 → 6) All existing imports preserved. Zero new TypeScript errors. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
68 lines
3.0 KiB
TypeScript
68 lines
3.0 KiB
TypeScript
'use client'
|
|
|
|
import { useState } from 'react'
|
|
import { services } from '../data'
|
|
import { getServiceTypeColor, getMethodColor } from '../helpers'
|
|
|
|
export default function ApiReferenceTab() {
|
|
const [copiedEndpoint, setCopiedEndpoint] = useState<string | null>(null)
|
|
|
|
const copyToClipboard = (text: string, id: string) => {
|
|
navigator.clipboard.writeText(text)
|
|
setCopiedEndpoint(id)
|
|
setTimeout(() => setCopiedEndpoint(null), 2000)
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
{services.filter(s => s.endpoints.length > 0).map((service) => (
|
|
<div key={service.id} className="bg-white rounded-xl border border-slate-200 overflow-hidden">
|
|
<div className="px-6 py-4 bg-slate-50 border-b border-slate-200">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<h3 className="font-semibold text-slate-900">{service.name}</h3>
|
|
<div className="text-sm text-slate-500">Base URL: http://localhost:{service.port}</div>
|
|
</div>
|
|
<span className={`text-xs px-2 py-0.5 rounded-full ${getServiceTypeColor(service.type)}`}>
|
|
{service.type}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="divide-y divide-slate-100">
|
|
{service.endpoints.map((endpoint, idx) => {
|
|
const endpointId = `${service.id}-${idx}`
|
|
const curlCommand = `curl -X ${endpoint.method} http://localhost:${service.port}${endpoint.path}`
|
|
|
|
return (
|
|
<div key={idx} className="px-6 py-3 hover:bg-slate-50 transition-colors">
|
|
<div className="flex items-center gap-3">
|
|
<span className={`text-xs font-mono font-semibold px-2 py-1 rounded ${getMethodColor(endpoint.method)}`}>
|
|
{endpoint.method}
|
|
</span>
|
|
<code className="text-sm font-mono text-slate-700 flex-1">{endpoint.path}</code>
|
|
<button
|
|
onClick={() => copyToClipboard(curlCommand, endpointId)}
|
|
className="text-xs text-slate-400 hover:text-slate-600 transition-colors"
|
|
title="Copy curl command"
|
|
>
|
|
{copiedEndpoint === endpointId ? (
|
|
<span className="text-green-600">Copied!</span>
|
|
) : (
|
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
|
|
</svg>
|
|
)}
|
|
</button>
|
|
</div>
|
|
<div className="text-sm text-slate-500 mt-1 ml-14">{endpoint.description}</div>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|