'use client'; import Image from 'next/image'; import { useState, useEffect } from 'react'; export type Framework = | 'openai-agents' | 'claude-agents' | 'langchain' | 'vercel-ai'; interface FrameworkOption { id: Framework; name: string; logo: string; logoDark?: string; } const frameworks: FrameworkOption[] = [ { id: 'openai-agents', name: 'OpenAI Agents', logo: '/images/providers/openai-logo.svg', logoDark: '/images/providers/openai-logo-dark.svg', }, { id: 'claude-agents', name: 'Claude Agents', logo: '/images/providers/anthropic-logo.svg', logoDark: '/images/providers/anthropic-logo-dark.svg', }, { id: 'langchain', name: 'LangChain', logo: '/images/providers/langchain-logo.svg', logoDark: '/images/providers/langchain-logo-dark.svg', }, { id: 'vercel-ai', name: 'Vercel AI SDK', logo: '/images/providers/vercel-logo.svg', logoDark: '/images/providers/vercel-logo-dark.svg', }, ]; interface FrameworkCardProps { framework: FrameworkOption; selected: boolean; onSelect: () => void; } function FrameworkCard({ framework, selected, onSelect }: FrameworkCardProps) { return ( ); } interface FrameworkSelectorProps { value?: Framework; onChange?: (framework: Framework) => void; } export function FrameworkSelector({ value = 'openai-agents', onChange }: FrameworkSelectorProps) { const [selected, setSelected] = useState(value); // Sync internal state with prop changes useEffect(() => { setSelected(value); }, [value]); const handleSelect = (framework: Framework) => { setSelected(framework); onChange?.(framework); }; return (

{frameworks.map((framework) => ( handleSelect(framework.id)} /> ))}

); } export { frameworks };