237 lines
7.7 KiB
TypeScript
237 lines
7.7 KiB
TypeScript
'use client';
|
||
|
||
import React, { useEffect, useState } from 'react';
|
||
import {
|
||
Check,
|
||
Copy,
|
||
ExternalLink,
|
||
ChevronDown,
|
||
ChevronUp,
|
||
LayoutDashboard,
|
||
Globe,
|
||
Rocket,
|
||
} from 'lucide-react';
|
||
import { cn } from '@/lib/utils';
|
||
import type { DeployResult } from '@mcpengine/ai-pipeline/types';
|
||
|
||
// ---------------------------------------------------------------------------
|
||
// Props
|
||
// ---------------------------------------------------------------------------
|
||
|
||
export interface DeploySuccessProps {
|
||
result: DeployResult;
|
||
serverName?: string;
|
||
onDashboard?: () => void;
|
||
onViewServer?: () => void;
|
||
onDeployAnother?: () => void;
|
||
className?: string;
|
||
}
|
||
|
||
// ---------------------------------------------------------------------------
|
||
// Component
|
||
// ---------------------------------------------------------------------------
|
||
|
||
export function DeploySuccess({
|
||
result,
|
||
serverName = 'MCP Server',
|
||
onDashboard,
|
||
onViewServer,
|
||
onDeployAnother,
|
||
className,
|
||
}: DeploySuccessProps) {
|
||
const [copied, setCopied] = useState(false);
|
||
const [showConfig, setShowConfig] = useState(false);
|
||
const [confettiFired, setConfettiFired] = useState(false);
|
||
|
||
// Fire confetti on mount
|
||
useEffect(() => {
|
||
if (confettiFired) return;
|
||
setConfettiFired(true);
|
||
|
||
// Dynamic import canvas-confetti (client-side only)
|
||
import('canvas-confetti')
|
||
.then((mod) => {
|
||
const confetti = mod.default;
|
||
// Burst 1 — center
|
||
confetti({
|
||
particleCount: 100,
|
||
spread: 70,
|
||
origin: { y: 0.6 },
|
||
colors: ['#818cf8', '#34d399', '#f59e0b', '#f472b6'],
|
||
});
|
||
// Burst 2 — left
|
||
setTimeout(() => {
|
||
confetti({
|
||
particleCount: 50,
|
||
angle: 60,
|
||
spread: 55,
|
||
origin: { x: 0, y: 0.65 },
|
||
colors: ['#818cf8', '#34d399'],
|
||
});
|
||
}, 200);
|
||
// Burst 3 — right
|
||
setTimeout(() => {
|
||
confetti({
|
||
particleCount: 50,
|
||
angle: 120,
|
||
spread: 55,
|
||
origin: { x: 1, y: 0.65 },
|
||
colors: ['#f59e0b', '#f472b6'],
|
||
});
|
||
}, 400);
|
||
})
|
||
.catch(() => {
|
||
// canvas-confetti not installed — no big deal
|
||
console.log('canvas-confetti not available');
|
||
});
|
||
}, [confettiFired]);
|
||
|
||
const copyUrl = async () => {
|
||
if (result.url) {
|
||
await navigator.clipboard.writeText(result.url);
|
||
setCopied(true);
|
||
setTimeout(() => setCopied(false), 2000);
|
||
}
|
||
};
|
||
|
||
const slug = result.url
|
||
?.replace(/^https?:\/\//, '')
|
||
.replace(/\.mcpengine\.run.*/, '') ?? 'my-server';
|
||
|
||
const claudeConfig = JSON.stringify(
|
||
{
|
||
mcpServers: {
|
||
[slug]: {
|
||
url: result.endpoint ?? result.url,
|
||
},
|
||
},
|
||
},
|
||
null,
|
||
2,
|
||
);
|
||
|
||
return (
|
||
<div className={cn('flex flex-col items-center text-center', className)}>
|
||
{/* Checkmark with glow */}
|
||
<div className="relative mb-6">
|
||
<div className="absolute inset-0 animate-ping rounded-full bg-emerald-500/20" />
|
||
<div className="absolute -inset-4 rounded-full bg-emerald-500/10 blur-xl" />
|
||
<div className="relative flex h-20 w-20 items-center justify-center rounded-full border-2 border-emerald-500 bg-emerald-500/20 shadow-2xl shadow-emerald-500/30">
|
||
<Check className="h-10 w-10 text-emerald-400" strokeWidth={3} />
|
||
</div>
|
||
</div>
|
||
|
||
{/* Heading */}
|
||
<h2 className="mb-2 text-2xl font-bold text-white">
|
||
Deployment Successful! 🚀
|
||
</h2>
|
||
<p className="mb-6 text-gray-400">
|
||
<span className="font-semibold text-white">{serverName}</span> is now
|
||
live and ready to connect
|
||
</p>
|
||
|
||
{/* URL display with copy */}
|
||
{result.url && (
|
||
<div className="mb-8 w-full max-w-lg">
|
||
<div className="group relative flex items-center gap-2 rounded-xl border border-emerald-500/30 bg-emerald-500/5 px-4 py-3 transition-all hover:border-emerald-500/50 hover:bg-emerald-500/10">
|
||
<Globe className="h-4 w-4 shrink-0 text-emerald-400" />
|
||
<span className="truncate font-mono text-sm text-emerald-300 animate-pulse">
|
||
{result.url}
|
||
</span>
|
||
<button
|
||
onClick={copyUrl}
|
||
className={cn(
|
||
'ml-auto flex shrink-0 items-center gap-1.5 rounded-lg px-3 py-1.5 text-xs font-medium transition-all',
|
||
copied
|
||
? 'bg-emerald-500 text-white'
|
||
: 'bg-gray-800 text-gray-300 hover:bg-gray-700',
|
||
)}
|
||
>
|
||
{copied ? (
|
||
<>
|
||
<Check className="h-3.5 w-3.5" />
|
||
Copied!
|
||
</>
|
||
) : (
|
||
<>
|
||
<Copy className="h-3.5 w-3.5" />
|
||
Copy
|
||
</>
|
||
)}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Claude Desktop config */}
|
||
<div className="mb-8 w-full max-w-lg">
|
||
<button
|
||
onClick={() => setShowConfig(!showConfig)}
|
||
className="flex w-full items-center justify-between rounded-xl border border-gray-700 bg-gray-800/50 px-4 py-3 text-sm font-medium text-gray-300 transition-all hover:border-gray-600 hover:bg-gray-800"
|
||
>
|
||
<span className="flex items-center gap-2">
|
||
<span className="text-lg">🖥️</span>
|
||
Add to Claude Desktop
|
||
</span>
|
||
{showConfig ? (
|
||
<ChevronUp className="h-4 w-4 text-gray-500" />
|
||
) : (
|
||
<ChevronDown className="h-4 w-4 text-gray-500" />
|
||
)}
|
||
</button>
|
||
|
||
{showConfig && (
|
||
<div className="mt-2 overflow-hidden rounded-xl border border-gray-700 bg-gray-900">
|
||
<div className="flex items-center justify-between border-b border-gray-800 px-4 py-2">
|
||
<span className="text-xs text-gray-500">
|
||
claude_desktop_config.json
|
||
</span>
|
||
<button
|
||
onClick={async () => {
|
||
await navigator.clipboard.writeText(claudeConfig);
|
||
}}
|
||
className="flex items-center gap-1 text-xs text-gray-400 hover:text-white"
|
||
>
|
||
<Copy className="h-3 w-3" />
|
||
Copy
|
||
</button>
|
||
</div>
|
||
<pre className="overflow-x-auto p-4 text-left font-mono text-xs leading-relaxed text-indigo-300">
|
||
{claudeConfig}
|
||
</pre>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* Action buttons */}
|
||
<div className="flex flex-wrap items-center justify-center gap-3">
|
||
<button
|
||
onClick={onDashboard}
|
||
className="flex items-center gap-2 rounded-xl border border-gray-700 bg-gray-800 px-5 py-2.5 text-sm font-medium text-gray-300 transition-all hover:border-gray-600 hover:bg-gray-700"
|
||
>
|
||
<LayoutDashboard className="h-4 w-4" />
|
||
Open Dashboard
|
||
</button>
|
||
|
||
{result.url && (
|
||
<button
|
||
onClick={onViewServer}
|
||
className="flex items-center gap-2 rounded-xl border border-indigo-500/30 bg-indigo-500/10 px-5 py-2.5 text-sm font-medium text-indigo-300 transition-all hover:border-indigo-500/50 hover:bg-indigo-500/20"
|
||
>
|
||
<ExternalLink className="h-4 w-4" />
|
||
View Server
|
||
</button>
|
||
)}
|
||
|
||
<button
|
||
onClick={onDeployAnother}
|
||
className="flex items-center gap-2 rounded-xl bg-gradient-to-r from-indigo-600 to-purple-600 px-5 py-2.5 text-sm font-medium text-white shadow-lg shadow-indigo-500/25 transition-all hover:shadow-indigo-500/40"
|
||
>
|
||
<Rocket className="h-4 w-4" />
|
||
Deploy Another
|
||
</button>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|