e0c588ca1c
Some checks failed
build / lint (22) (push) Failing after 17s
build / test (22) (push) Failing after 8s
build / lint (23) (push) Failing after 2s
build / build (22) (push) Has been skipped
build / build (23) (push) Has been skipped
build / test (23) (push) Failing after 4s
docsearch / docsearch (push) Failing after 1s
77 lines
3.7 KiB
TypeScript
77 lines
3.7 KiB
TypeScript
export default function Home() {
|
|
return (
|
|
<div className="flex flex-col min-h-screen">
|
|
{/* Header */}
|
|
<header className="bg-white/80 dark:bg-slate-900/80 backdrop-blur-sm border-b border-slate-200 dark:border-slate-700">
|
|
<div className="px-8 py-6">
|
|
<h1 className="text-3xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
|
|
Hocuspocus v3 Playground
|
|
</h1>
|
|
<p className="text-slate-600 dark:text-slate-400 mt-2">
|
|
Real-time collaborative editor demo
|
|
</p>
|
|
</div>
|
|
</header>
|
|
|
|
{/* Main content */}
|
|
<main className="flex-1 p-8">
|
|
<div className="max-w-4xl mx-auto">
|
|
{/* Welcome card */}
|
|
<div className="bg-white/80 dark:bg-slate-900/80 backdrop-blur-sm rounded-2xl border border-slate-200 dark:border-slate-700 shadow-xl p-8 mb-8">
|
|
<div className="flex items-center mb-6">
|
|
<div className="w-12 h-12 bg-gradient-to-br from-green-400 to-blue-500 rounded-xl flex items-center justify-center mr-4">
|
|
<span className="text-white text-xl">🚀</span>
|
|
</div>
|
|
<h2 className="text-2xl font-bold text-slate-900 dark:text-white">Welcome!</h2>
|
|
</div>
|
|
<p className="text-slate-700 dark:text-slate-300 text-lg leading-relaxed mb-6">
|
|
This demo showcases how to use a shared WebSocket connection to load multiple documents with real-time collaboration.
|
|
</p>
|
|
<div className="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4">
|
|
<p className="text-blue-800 dark:text-blue-200 font-medium">
|
|
💡 Tip: Open a second tab or window and experience collaborative editing in real-time!
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Features grid */}
|
|
<div className="grid md:grid-cols-2 gap-6 mb-8">
|
|
<div className="bg-white/80 dark:bg-slate-900/80 backdrop-blur-sm rounded-xl border border-slate-200 dark:border-slate-700 p-6">
|
|
<div className="w-10 h-10 bg-gradient-to-br from-purple-500 to-pink-500 rounded-lg flex items-center justify-center mb-4">
|
|
<span className="text-white text-lg">🔌</span>
|
|
</div>
|
|
<h3 className="font-semibold text-slate-900 dark:text-white mb-2">Smart Connection</h3>
|
|
<p className="text-slate-600 dark:text-slate-400 text-sm">
|
|
WebSocket connection opens when you enter article routes and closes when you leave.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="bg-white/80 dark:bg-slate-900/80 backdrop-blur-sm rounded-xl border border-slate-200 dark:border-slate-700 p-6">
|
|
<div className="w-10 h-10 bg-gradient-to-br from-amber-500 to-orange-500 rounded-lg flex items-center justify-center mb-4">
|
|
<span className="text-white text-lg">📄</span>
|
|
</div>
|
|
<h3 className="font-semibold text-slate-900 dark:text-white mb-2">On-Demand Loading</h3>
|
|
<p className="text-slate-600 dark:text-slate-400 text-sm">
|
|
Documents are fetched as needed via the shared connection for optimal performance.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Debug info */}
|
|
<div className="bg-slate-50 dark:bg-slate-800/50 rounded-xl border border-slate-200 dark:border-slate-700 p-6">
|
|
<div className="flex items-center mb-3">
|
|
<div className="w-8 h-8 bg-gradient-to-br from-slate-500 to-slate-600 rounded-lg flex items-center justify-center mr-3">
|
|
<span className="text-white text-sm">🔍</span>
|
|
</div>
|
|
<h3 className="font-semibold text-slate-700 dark:text-slate-300">Developer Console</h3>
|
|
</div>
|
|
<p className="text-slate-600 dark:text-slate-400 text-sm">
|
|
Open your browser's developer console to see detailed connection and synchronization information.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
);
|
|
}
|