49 lines
1.7 KiB
TypeScript
49 lines
1.7 KiB
TypeScript
'use client'
|
|
|
|
import dynamic from 'next/dynamic'
|
|
import Link from 'next/link'
|
|
import { demoNodes } from '@/lib/presets'
|
|
|
|
const FlowCanvas = dynamic(() => import('@/components/FlowCanvas'), {
|
|
ssr: false,
|
|
loading: () => (
|
|
<div className="w-full h-full flex items-center justify-center bg-slate-50">
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-8 h-8 border-4 border-blue-500 border-t-transparent rounded-full animate-spin" />
|
|
<span className="text-slate-600">Loading flow editor...</span>
|
|
</div>
|
|
</div>
|
|
),
|
|
})
|
|
|
|
export default function TbffDemo() {
|
|
return (
|
|
<main className="h-screen w-screen flex flex-col">
|
|
{/* Demo Banner */}
|
|
<div className="bg-slate-800 text-white px-4 py-2 flex items-center justify-between text-sm flex-shrink-0">
|
|
<div className="flex items-center gap-3">
|
|
<Link href="/" className="flex items-center gap-2 hover:opacity-80 transition-opacity">
|
|
<div className="w-6 h-6 bg-gradient-to-br from-amber-400 to-emerald-500 rounded flex items-center justify-center font-bold text-slate-900 text-[10px]">
|
|
rF
|
|
</div>
|
|
<span className="font-medium">rFunds</span>
|
|
</Link>
|
|
<span className="text-slate-500">|</span>
|
|
<span className="text-slate-300">Interactive Demo</span>
|
|
</div>
|
|
<Link
|
|
href="/space"
|
|
className="px-3 py-1 bg-emerald-600 hover:bg-emerald-500 rounded text-xs font-medium transition-colors"
|
|
>
|
|
Create Your Own
|
|
</Link>
|
|
</div>
|
|
|
|
{/* Canvas */}
|
|
<div className="flex-1">
|
|
<FlowCanvas initialNodes={demoNodes} mode="demo" />
|
|
</div>
|
|
</main>
|
|
)
|
|
}
|