'use client'; import Image from 'next/image'; import Link from 'next/link'; import { createContext, useContext, useState, useEffect, useRef, type ReactNode, } from 'react'; // Types interface FrameworkData { id: string; name: string; logo: string; logoDark?: string; } interface QuickstartContextValue { selectedId: string; setSelectedId: (id: string) => void; registerFramework: (data: FrameworkData) => void; frameworks: FrameworkData[]; } // Context to share state between QuickstartFlow and FrameworkOption const QuickstartContext = createContext(null); export function useQuickstartFramework() { const context = useContext(QuickstartContext); return context?.selectedId ?? null; } // Framework option component - registers itself and conditionally renders content interface FrameworkOptionProps { id: string; name: string; logo: string; logoDark?: string; children: ReactNode; } export function FrameworkOption({ id, name, logo, logoDark, children }: FrameworkOptionProps) { const context = useContext(QuickstartContext); const hasRegistered = useRef(false); useEffect(() => { if (context && !hasRegistered.current) { context.registerFramework({ id, name, logo, logoDark }); hasRegistered.current = true; } }, [context, id, name, logo, logoDark]); // Only render if this framework is selected if (!context || context.selectedId !== id) { return null; } return <>{children}; } // Card component for framework selection interface FrameworkCardProps { id: string; name: string; logo: string; logoDark?: string; selected: boolean; onSelect: () => void; } function FrameworkCard({ name, logo, logoDark, selected, onSelect }: FrameworkCardProps) { return ( ); } // Main wrapper component interface QuickstartFlowProps { children: ReactNode; } export function QuickstartFlow({ children }: QuickstartFlowProps) { const [frameworks, setFrameworks] = useState([]); const [selectedId, setSelectedId] = useState(''); const registeredIds = useRef>(new Set()); const registerFramework = (data: FrameworkData) => { if (!registeredIds.current.has(data.id)) { registeredIds.current.add(data.id); setFrameworks((prev) => { // Check if already exists if (prev.some((f) => f.id === data.id)) { return prev; } return [...prev, data]; }); } }; // Set default selection to first framework once registered useEffect(() => { if (frameworks.length > 0 && !selectedId) { setSelectedId(frameworks[0].id); } }, [frameworks, selectedId]); const contextValue: QuickstartContextValue = { selectedId, setSelectedId, registerFramework, frameworks, }; return ( {/* Framework + integration type selector */} {frameworks.length > 0 && (

Choose your framework

{frameworks.map((framework) => ( setSelectedId(framework.id)} /> ))} → Other providers

{/* Portal target for integration tabs header */}

)} {/* Render all children - FrameworkOption will conditionally show based on selection */} {children} ); }