'use client'; import Image from 'next/image'; import Link from 'next/link'; import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs'; import { ReactNode, useEffect, useState } from 'react'; import { createPortal } from 'react-dom'; interface TabConfig { value: string; label: string; icon?: string; iconDark?: string; } const defaultTabs: TabConfig[] = [ { value: 'native', label: 'Native Tools', icon: '/images/providers/native-tools-logo.svg', iconDark: '/images/providers/native-tools-logo-dark.svg' }, { value: 'mcp', label: 'MCP', icon: '/images/mcp-logo.svg', iconDark: '/images/mcp-logo-dark.svg' }, ]; interface IntegrationTabsProps { children: ReactNode; defaultValue?: string; tabs?: TabConfig[]; } function TabsHeader({ tabs }: { tabs: TabConfig[] }) { return (

{tabs.map((tab) => ( {tab.icon && tab.iconDark && (

)} {tab.label} ))}

); } function PortaledTabsHeader({ tabs }: { tabs: TabConfig[] }) { const [portalTarget, setPortalTarget] = useState(null); useEffect(() => { const target = document.getElementById('integration-tabs-portal'); if (target) { setPortalTarget(target); return; } // Portal target may not exist yet (frameworks register asynchronously via useEffect) const observer = new MutationObserver(() => { const el = document.getElementById('integration-tabs-portal'); if (el) { setPortalTarget(el); observer.disconnect(); } }); observer.observe(document.body, { childList: true, subtree: true }); return () => observer.disconnect(); }, []); const header = (

Choose your integration type · Use this guide to decide

); if (portalTarget) { return createPortal(header, portalTarget); } // Fallback: render inline if portal target not found return

{header}

; } export function IntegrationTabs({ children, defaultValue, tabs = defaultTabs }: IntegrationTabsProps) { const isQuickstart = tabs === defaultTabs; return ( {isQuickstart ? ( ) : (

)} {children} ); } export function IntegrationContent({ value, children }: { value: string; children: ReactNode; }) { return {children}; }