fix: widget
This commit is contained in:
parent
7368d287e9
commit
bd46f63ac8
|
|
@ -26,23 +26,23 @@ interface InteractiveAPIWidgetFinalProps {
|
|||
}>;
|
||||
}
|
||||
|
||||
type Language = 'curl' | 'javascript' | 'python' | 'go';
|
||||
type Language = 'curl' | 'javascript' | 'python' | 'go' | 'js-sdk' | 'mcp';
|
||||
|
||||
const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3000';
|
||||
const API_KEY_STORAGE = 'banatie_docs_api_key';
|
||||
|
||||
const getMethodColor = (method: string): string => {
|
||||
const getMethodBadgeStyle = (method: string): string => {
|
||||
switch (method) {
|
||||
case 'GET':
|
||||
return 'from-cyan-500 to-cyan-600';
|
||||
return 'bg-cyan-600/20 text-cyan-400 border border-cyan-500/40';
|
||||
case 'POST':
|
||||
return 'from-purple-500 to-purple-600';
|
||||
return 'bg-green-600/20 text-green-400 border border-green-500/40';
|
||||
case 'PUT':
|
||||
return 'from-amber-500 to-amber-600';
|
||||
return 'bg-amber-600/20 text-amber-400 border border-amber-500/40';
|
||||
case 'DELETE':
|
||||
return 'from-red-500 to-red-600';
|
||||
return 'bg-red-600/20 text-red-400 border border-red-500/40';
|
||||
default:
|
||||
return 'from-purple-500 to-cyan-500';
|
||||
return 'bg-slate-600/20 text-slate-400 border border-slate-500/40';
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -96,10 +96,33 @@ export const InteractiveAPIWidgetFinal = ({
|
|||
};
|
||||
}, [parameters]);
|
||||
|
||||
// Get language display name
|
||||
const getLanguageLabel = (lang: Language): string => {
|
||||
switch (lang) {
|
||||
case 'curl':
|
||||
return 'cURL';
|
||||
case 'javascript':
|
||||
return 'JavaScript';
|
||||
case 'python':
|
||||
return 'Python';
|
||||
case 'go':
|
||||
return 'Go';
|
||||
case 'js-sdk':
|
||||
return 'JS SDK';
|
||||
case 'mcp':
|
||||
return 'MCP';
|
||||
}
|
||||
};
|
||||
|
||||
// Generate code examples
|
||||
const generateCode = (): string => {
|
||||
const url = `${API_BASE_URL}${endpoint}`;
|
||||
|
||||
// Coming soon placeholders
|
||||
if (language === 'js-sdk' || language === 'mcp') {
|
||||
return `# Coming soon\n# ${getLanguageLabel(language)} integration is under development`;
|
||||
}
|
||||
|
||||
switch (language) {
|
||||
case 'curl':
|
||||
return `curl -X ${method} "${url}" \\
|
||||
|
|
@ -251,59 +274,52 @@ func main() {
|
|||
return (
|
||||
<>
|
||||
{/* Minimized Widget */}
|
||||
<div className="my-8 bg-slate-900/50 backdrop-blur-sm border border-purple-500/30 rounded-2xl overflow-hidden shadow-xl">
|
||||
<div className="my-8 bg-slate-900/50 backdrop-blur-sm border border-slate-700/50 rounded-2xl overflow-hidden">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between bg-slate-950/80 px-6 py-4 border-b border-purple-500/30">
|
||||
<div className="flex items-center justify-between bg-slate-950/80 px-6 py-4 border-b border-slate-700/50">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className={`px-3 py-1.5 rounded-lg bg-gradient-to-r ${getMethodColor(method)} text-white text-sm font-bold shadow-lg`}>
|
||||
<div className={`px-3 py-1 rounded text-xs font-bold ${getMethodBadgeStyle(method)}`}>
|
||||
{method}
|
||||
</div>
|
||||
<code className="text-sm text-gray-400">{endpoint}</code>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setIsExpanded(true)}
|
||||
className="px-4 py-2 bg-cyan-600/20 hover:bg-cyan-600/30 text-cyan-400 rounded-lg transition-all text-sm font-semibold border border-cyan-500/40 hover:border-cyan-500/60"
|
||||
className="flex items-center gap-2 px-4 py-2 bg-cyan-600/10 hover:bg-cyan-600/20 text-cyan-400 rounded-lg transition-all text-sm font-medium border border-cyan-500/30 hover:border-cyan-500/50"
|
||||
>
|
||||
⛶ Expand
|
||||
<span>⛶</span>
|
||||
<span>Expand</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Code Section - Full Width */}
|
||||
<div className="p-6">
|
||||
{/* Language Tabs */}
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
{(['curl', 'javascript', 'python', 'go'] as Language[]).map((lang, idx) => {
|
||||
const colors = ['purple', 'cyan', 'amber', 'purple'];
|
||||
const color = colors[idx];
|
||||
return (
|
||||
<button
|
||||
key={lang}
|
||||
onClick={() => setLanguage(lang)}
|
||||
className={`px-4 py-2 text-sm rounded-xl font-semibold transition-all border ${
|
||||
language === lang
|
||||
? color === 'purple'
|
||||
? 'bg-purple-500/30 text-white border-purple-500/60 shadow-lg shadow-purple-500/20'
|
||||
: color === 'cyan'
|
||||
? 'bg-cyan-500/30 text-white border-cyan-500/60 shadow-lg shadow-cyan-500/20'
|
||||
: 'bg-amber-500/30 text-white border-amber-500/60 shadow-lg shadow-amber-500/20'
|
||||
: 'bg-slate-800/30 text-gray-400 border-slate-700 hover:border-slate-600 hover:text-white'
|
||||
}`}
|
||||
>
|
||||
{lang === 'javascript' ? 'JS' : lang.toUpperCase()}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
<div className="flex items-center gap-2 mb-4 flex-wrap">
|
||||
{(['curl', 'javascript', 'python', 'go', 'js-sdk', 'mcp'] as Language[]).map((lang) => (
|
||||
<button
|
||||
key={lang}
|
||||
onClick={() => setLanguage(lang)}
|
||||
className={`px-3 py-1.5 text-xs rounded-lg font-medium transition-all border ${
|
||||
language === lang
|
||||
? 'bg-slate-700 text-white border-slate-600'
|
||||
: 'bg-slate-800/50 text-gray-400 border-slate-700/50 hover:border-slate-600 hover:text-gray-300'
|
||||
}`}
|
||||
>
|
||||
{getLanguageLabel(lang)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Code Display */}
|
||||
<div className="border border-cyan-500/30 rounded-xl overflow-hidden shadow-lg">
|
||||
<div className="flex items-center justify-between bg-slate-950/80 px-4 py-3 border-b border-cyan-500/20">
|
||||
<span className="text-xs text-cyan-400 font-semibold">Code Example</span>
|
||||
<div className="border border-slate-700/50 rounded-xl overflow-hidden">
|
||||
<div className="flex items-center justify-between bg-slate-950/80 px-4 py-3 border-b border-slate-700/50">
|
||||
<span className="text-xs text-gray-400 font-medium">Code Example</span>
|
||||
<button
|
||||
onClick={copyCode}
|
||||
className="px-3 py-1.5 text-xs bg-purple-600/30 hover:bg-purple-600/50 text-purple-300 rounded-lg transition-all font-semibold"
|
||||
className="text-xs text-gray-400 hover:text-white transition-colors font-medium"
|
||||
>
|
||||
📋 Copy
|
||||
Copy
|
||||
</button>
|
||||
</div>
|
||||
<div className="p-4 bg-slate-950/50 max-h-80 overflow-auto">
|
||||
|
|
@ -315,50 +331,43 @@ func main() {
|
|||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="grid grid-cols-2 gap-4 px-6 pb-6">
|
||||
<div className="flex items-center justify-between px-6 pb-6">
|
||||
<button
|
||||
onClick={expandApiKey}
|
||||
className="flex items-center gap-2 px-4 py-2.5 bg-slate-800/50 hover:bg-slate-800 border border-slate-700 rounded-lg text-gray-400 hover:text-white text-sm transition-colors"
|
||||
className="text-sm text-gray-400 hover:text-white underline-offset-4 hover:underline transition-colors"
|
||||
>
|
||||
<span>🔑</span>
|
||||
<span>{apiKey ? 'API Key Set' : 'Enter API Key'}</span>
|
||||
{apiKey ? 'API Key Set' : 'Enter API Key'}
|
||||
</button>
|
||||
<button
|
||||
onClick={executeRequest}
|
||||
disabled={!apiKey || isExecuting}
|
||||
className="px-4 py-2.5 rounded-lg bg-gradient-to-r from-purple-600 to-cyan-600 text-white text-sm font-semibold hover:from-purple-500 hover:to-cyan-500 transition-all disabled:opacity-50 disabled:cursor-not-allowed shadow-lg hover:shadow-purple-500/30"
|
||||
className="px-4 py-2 rounded-lg bg-slate-700 hover:bg-slate-600 text-white text-sm font-medium transition-all disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
{isExecuting ? '⚡ Executing...' : '⚡ Try It'}
|
||||
{isExecuting ? 'Executing...' : 'Try It'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Inline Response (if any) */}
|
||||
{(response || error) && (
|
||||
<div className="border-t border-purple-500/30 p-6 bg-slate-950/50">
|
||||
<h4 className="text-sm font-semibold text-white mb-3 flex items-center gap-2">
|
||||
<span>📦</span>
|
||||
<div className="border-t border-slate-700/50 p-6 bg-slate-950/50">
|
||||
<h4 className="text-sm font-semibold text-white mb-3">
|
||||
Response
|
||||
</h4>
|
||||
{error ? (
|
||||
<div className="p-4 bg-red-500/10 border border-red-500/40 rounded-xl text-red-400 text-sm shadow-lg shadow-red-500/10">
|
||||
<div className="flex items-start gap-2">
|
||||
<span>⚠️</span>
|
||||
<div>
|
||||
<p className="font-semibold mb-1">Error</p>
|
||||
<p className="text-xs">{error}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-4 bg-red-500/10 border border-red-500/40 rounded-xl text-red-400 text-sm">
|
||||
<p className="font-semibold mb-1">Error</p>
|
||||
<p className="text-xs">{error}</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className={`p-4 rounded-xl border ${
|
||||
<div className={`p-4 rounded-xl ${
|
||||
isSuccess
|
||||
? 'bg-green-500/5 border-green-500/40 shadow-lg shadow-green-500/10'
|
||||
: 'bg-slate-800/50 border-slate-700'
|
||||
? 'bg-green-500/5 border border-green-500/30'
|
||||
: 'bg-slate-800/50 border border-slate-700'
|
||||
}`}>
|
||||
{isSuccess && (
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
<span className="px-2 py-1 text-xs bg-green-500/20 text-green-400 rounded-full border border-green-500/40">
|
||||
✓ 200 Success
|
||||
<span className="px-2 py-1 text-xs bg-green-500/20 text-green-400 rounded border border-green-500/40">
|
||||
200 Success
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
|
@ -374,63 +383,59 @@ func main() {
|
|||
{/* Expanded Modal */}
|
||||
{isExpanded && (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 backdrop-blur-sm">
|
||||
<div className="relative w-[90vw] h-[85vh] bg-slate-900 border border-purple-500/30 rounded-2xl shadow-2xl overflow-hidden flex flex-col">
|
||||
<div className="relative w-[90vw] h-[85vh] bg-slate-900 border border-slate-700/50 rounded-2xl shadow-2xl overflow-hidden flex flex-col">
|
||||
{/* Modal Header */}
|
||||
<div className="flex items-center justify-between bg-slate-950/80 px-6 py-4 border-b border-purple-500/30">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className={`px-3 py-1.5 rounded-lg bg-gradient-to-r ${getMethodColor(method)} text-white text-sm font-bold shadow-lg`}>
|
||||
{method}
|
||||
<div className="flex items-center justify-between bg-slate-950/80 px-6 py-4 border-b border-slate-700/50">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className={`px-3 py-1 rounded text-xs font-bold ${getMethodBadgeStyle(method)}`}>
|
||||
{method}
|
||||
</div>
|
||||
<code className="text-sm text-gray-400">{endpoint}</code>
|
||||
</div>
|
||||
<code className="text-sm text-gray-400">{endpoint}</code>
|
||||
<span className="text-xs text-gray-500">•</span>
|
||||
<p className="text-xs text-gray-500">{description}</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setIsExpanded(false)}
|
||||
className="px-4 py-2 bg-slate-800 hover:bg-slate-700 text-gray-400 hover:text-white rounded-lg transition-all text-sm font-semibold"
|
||||
className="px-4 py-2 bg-slate-800 hover:bg-slate-700 text-gray-400 hover:text-white rounded-lg transition-all text-sm font-medium"
|
||||
>
|
||||
✕ Close
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Two-Panel Layout */}
|
||||
<div className="grid grid-cols-2 gap-6 p-6 flex-1 overflow-hidden">
|
||||
{/* Left: Code */}
|
||||
<div className="flex flex-col overflow-hidden">
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
{(['curl', 'javascript', 'python', 'go'] as Language[]).map((lang, idx) => {
|
||||
const colors = ['purple', 'cyan', 'amber', 'purple'];
|
||||
const color = colors[idx];
|
||||
return (
|
||||
<button
|
||||
key={lang}
|
||||
onClick={() => setLanguage(lang)}
|
||||
className={`px-4 py-2 text-sm rounded-xl font-semibold transition-all border ${
|
||||
language === lang
|
||||
? color === 'purple'
|
||||
? 'bg-purple-500/30 text-white border-purple-500/60 shadow-lg shadow-purple-500/20'
|
||||
: color === 'cyan'
|
||||
? 'bg-cyan-500/30 text-white border-cyan-500/60 shadow-lg shadow-cyan-500/20'
|
||||
: 'bg-amber-500/30 text-white border-amber-500/60 shadow-lg shadow-amber-500/20'
|
||||
: 'bg-slate-800/30 text-gray-400 border-slate-700 hover:border-slate-600 hover:text-white'
|
||||
}`}
|
||||
>
|
||||
{lang === 'javascript' ? 'JS' : lang.toUpperCase()}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
<div className="flex flex-col h-full min-h-0">
|
||||
<div className="flex items-center gap-2 mb-4 flex-wrap min-h-[32px] flex-shrink-0">
|
||||
{(['curl', 'javascript', 'python', 'go', 'js-sdk', 'mcp'] as Language[]).map((lang) => (
|
||||
<button
|
||||
key={lang}
|
||||
onClick={() => setLanguage(lang)}
|
||||
className={`px-3 py-1.5 text-xs rounded-lg font-medium transition-all border ${
|
||||
language === lang
|
||||
? 'bg-slate-700 text-white border-slate-600'
|
||||
: 'bg-slate-800/50 text-gray-400 border-slate-700/50 hover:border-slate-600 hover:text-gray-300'
|
||||
}`}
|
||||
>
|
||||
{getLanguageLabel(lang)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="border border-cyan-500/30 rounded-xl overflow-hidden shadow-lg flex-1 flex flex-col">
|
||||
<div className="flex items-center justify-between bg-slate-950/80 px-4 py-3 border-b border-cyan-500/20">
|
||||
<span className="text-xs text-cyan-400 font-semibold">Code Example</span>
|
||||
<div className="border border-slate-700/50 rounded-xl overflow-hidden flex-1 flex flex-col min-h-0">
|
||||
<div className="flex items-center justify-between bg-slate-950/80 px-4 py-3 border-b border-slate-700/50 flex-shrink-0">
|
||||
<span className="text-xs text-gray-400 font-medium">Code Example</span>
|
||||
<button
|
||||
onClick={copyCode}
|
||||
className="px-3 py-1.5 text-xs bg-purple-600/30 hover:bg-purple-600/50 text-purple-300 rounded-lg transition-all font-semibold"
|
||||
className="text-xs text-gray-400 hover:text-white transition-colors font-medium"
|
||||
>
|
||||
📋 Copy
|
||||
Copy
|
||||
</button>
|
||||
</div>
|
||||
<div className="p-4 bg-slate-950/50 overflow-auto flex-1">
|
||||
<pre className="text-base text-gray-300 leading-relaxed">
|
||||
<div className="p-4 bg-slate-950/50 overflow-auto flex-1 min-h-0">
|
||||
<pre className="text-sm text-gray-300 leading-relaxed">
|
||||
<code>{generateCode()}</code>
|
||||
</pre>
|
||||
</div>
|
||||
|
|
@ -438,36 +443,30 @@ func main() {
|
|||
</div>
|
||||
|
||||
{/* Right: Response */}
|
||||
<div className="flex flex-col overflow-hidden">
|
||||
<h4 className="text-sm font-semibold text-white mb-4 flex items-center gap-2">
|
||||
<span>📦</span>
|
||||
<div className="flex flex-col h-full min-h-0">
|
||||
<h4 className="text-sm font-semibold text-white mb-4 min-h-[32px] flex items-center flex-shrink-0">
|
||||
Response
|
||||
</h4>
|
||||
|
||||
<div className="border border-purple-500/30 rounded-xl overflow-hidden shadow-lg flex-1 flex flex-col">
|
||||
<div className="bg-slate-950/80 px-4 py-3 border-b border-purple-500/20">
|
||||
<div className="border border-slate-700/50 rounded-xl overflow-hidden flex-1 flex flex-col min-h-0">
|
||||
<div className="bg-slate-950/80 px-4 py-3 border-b border-slate-700/50 flex-shrink-0">
|
||||
{response && (
|
||||
<span
|
||||
className={`inline-flex items-center gap-2 px-3 py-1.5 rounded-lg text-xs font-bold ${
|
||||
className={`inline-flex items-center gap-2 px-3 py-1 rounded text-xs font-bold ${
|
||||
response.success
|
||||
? 'bg-green-500/20 text-green-400 border border-green-500/40 shadow-lg shadow-green-500/10'
|
||||
: 'bg-red-500/20 text-red-400 border border-red-500/40 shadow-lg shadow-red-500/10'
|
||||
? 'bg-green-500/20 text-green-400 border border-green-500/40'
|
||||
: 'bg-red-500/20 text-red-400 border border-red-500/40'
|
||||
}`}
|
||||
>
|
||||
{response.success ? '✓ Success' : '✕ Error'}
|
||||
{response.success ? 'Success' : 'Error'}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="p-4 bg-slate-950/50 overflow-auto flex-1">
|
||||
<div className="p-4 bg-slate-950/50 overflow-auto flex-1 min-h-0">
|
||||
{error ? (
|
||||
<div className="p-4 bg-red-500/10 border border-red-500/40 rounded-xl text-red-400 text-sm shadow-lg shadow-red-500/10">
|
||||
<div className="flex items-start gap-2">
|
||||
<span className="text-xl">⚠️</span>
|
||||
<div>
|
||||
<p className="font-semibold mb-1">Error</p>
|
||||
<p className="text-xs">{error}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-4 bg-red-500/10 border border-red-500/40 rounded-xl text-red-400 text-sm">
|
||||
<p className="font-semibold mb-1">Error</p>
|
||||
<p className="text-xs">{error}</p>
|
||||
</div>
|
||||
) : response ? (
|
||||
<pre className="text-sm text-gray-300 leading-relaxed">
|
||||
|
|
@ -476,9 +475,8 @@ func main() {
|
|||
) : (
|
||||
<div className="flex items-center justify-center h-full">
|
||||
<div className="text-center">
|
||||
<p className="text-4xl mb-3">🚀</p>
|
||||
<p className="text-sm text-gray-500">
|
||||
Click <strong className="text-purple-400">"Try It"</strong> below to see the response
|
||||
Click <strong className="text-white">"Try It"</strong> below to see the response
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -490,17 +488,12 @@ func main() {
|
|||
<button
|
||||
onClick={executeRequest}
|
||||
disabled={!apiKey || isExecuting}
|
||||
className="mt-4 px-6 py-3 rounded-xl bg-gradient-to-r from-purple-600 to-cyan-600 text-white text-base font-bold hover:from-purple-500 hover:to-cyan-500 transition-all disabled:opacity-50 disabled:cursor-not-allowed shadow-2xl hover:shadow-purple-500/50"
|
||||
className="mt-4 px-4 py-2 rounded-lg bg-slate-700 hover:bg-slate-600 text-white text-sm font-medium transition-all disabled:opacity-50 disabled:cursor-not-allowed flex-shrink-0"
|
||||
>
|
||||
{isExecuting ? '⚡ Executing...' : '⚡ Try It Now'}
|
||||
{isExecuting ? 'Executing...' : 'Try It'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Footer hint */}
|
||||
<div className="px-6 pb-4 text-center">
|
||||
<p className="text-xs text-gray-500">{description}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
|
|
|||
Loading…
Reference in New Issue