{"instruction": "Create a primary button component using React and Tailwind CSS. It should have a hover effect, an active (pressed) state, and support a 'disabled' prop.", "input": "", "output": "import React from 'react';\n\ninterface ButtonProps {\n children: React.ReactNode;\n onClick?: () => void;\n disabled?: boolean;\n className?: string;\n}\n\nconst Button: React.FC<ButtonProps> = ({ children, onClick, disabled, className = '' }) => {\n return (\n <button\n onClick={onClick}\n disabled={disabled}\n className={`px-4 py-2 bg-blue-600 text-white font-medium rounded-md transition-colors duration-200 hover:bg-blue-700 active:bg-blue-800 disabled:opacity-50 disabled:cursor-not-allowed ${className}`}\n >\n {children}\n </button>\n );\n};\n\nexport default Button;", "metadata": {"category": "component_gen", "framework": "react", "complexity": "low"}}
{"instruction": "Create a reusable Badge component using Tailwind CSS. It should accept a 'variant' prop (e.g., 'success', 'error', 'warning', 'info') to change its color.", "input": "", "output": "import React from 'react';\n\ninterface BadgeProps {\n children: React.ReactNode;\n variant?: 'success' | 'error' | 'warning' | 'info';\n className?: string;\n}\n\nconst variants = {\n success: 'bg-green-100 text-green-800',\n error: 'bg-red-100 text-red-800',\n warning: 'bg-yellow-100 text-yellow-800',\n info: 'bg-blue-100 text-blue-800',\n};\n\nconst Badge: React.FC<BadgeProps> = ({ children, variant = 'info', className = '' }) => {\n return (\n <span className={`px-2.5 py-0.5 rounded-full text-xs font-semibold ${variants[variant]} ${className}`}>\n {children}\n </span>\n );\n};\n\nexport default Badge;", "metadata": {"category": "component_gen", "framework": "react", "complexity": "low"}}
{"instruction": "Create a text input component with a label and an error state using React and Tailwind CSS.", "input": "", "output": "import React from 'react';\n\ninterface InputProps {\n label: string;\n error?: string;\n placeholder?: string;\n value?: string;\n onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;\n className?: string;\n}\n\nconst Input: React.FC<InputProps> = ({ label, error, placeholder, value, onChange, className = '' }) => {\n return (\n <div className={`flex flex-col gap-1.5 ${className}`}>\n <label className=\"text-sm font-medium text-gray-700\">{label}</label>\n <input\n type=\"text\"\n value={value}\n onChange={onChange}\n placeholder={placeholder}\n className={`px-3 py-2 border rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 ${error ? 'border-red-500 focus:ring-red-500' : 'border-gray-300 focus:border-blue-500'}`}\n />\n {error && <p className=\"text-xs text-red-500\">{error}</p>}\n </div>\n );\n};\n\nexport default Input;", "metadata": {"category": "component_gen", "framework": "react", "complexity": "medium"}}
{"instruction": "Create a Card component that includes an image, a title, and a description using React and Tailwind CSS.", "input": "", "output": "import React from 'react';\n\ninterface CardProps {\n imageSrc: string;\n imageAlt: string;\n title: string;\n description: string;\n className?: string;\n}\n\nconst Card: React.FC<CardProps> = ({ imageSrc, imageAlt, title, description, className = '' }) => {\n return (\n <div className={`max-w-sm rounded overflow-hidden shadow-lg bg-white ${className}`}>\n <img className=\"w-full h-48 object-cover\" src={imageSrc} alt={imageAlt} />\n <div className=\"px-6 py-4\">\n <div className=\"font-bold text-xl mb-2 text-gray-800\">{title}</div>\n <p className=\"text-gray-600 text-base\">{description}</p>\n </div>\n </div>\n );\n};\n\nexport default Card;", "metadata": {"category": "component_gen", "framework": "react", "complexity": "medium"}}
{"instruction": "Create an Avatar component that displays an image or falls back to the user's initials if the image fails to load.", "input": "", "output": "import React, { useState } from 'react';\n\ninterface AvatarProps {\n src?: string;\n name: string;\n size?: 'sm' | 'md' | 'lg';\n className?: string;\n}\n\nconst Avatar: React.FC<AvatarProps> = ({ src, name, size = 'md', className = '' }) => {\n const [imgError, setImgError] = useState(false);\n \n const sizeClasses = {\n sm: 'w-8 h-8 text-xs',\n md: 'w-12 h-12 text-base',\n lg: 'w-16 h-16 text-xl',\n };\n\n const getInitials = (name: string) => {\n return name.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2);\n };\n\n return (\n <div className={`${sizeClasses[size]} rounded-full overflow-hidden bg-gray-200 flex items-center justify-center text-gray-600 font-medium ${className}`}>\n {!src || imgError ? (\n <span>{getInitials(name)}</span>\n ) : (\n <img \n src={src} \n alt={name} \n className=\"w-full h-full object-cover\" \n onError={() => setImgError(true)} \n />\n )}\n </div>\n );\n};\n\nexport default Avatar;", "metadata": {"category": "component_gen", "framework": "react", "complexity": "medium"}}
{"instruction": "Create a Button component that supports a 'loading' state. When loading, it should show a spinner and be disabled.", "input": "", "output": "import React from 'react';\n\ninterface ButtonProps {\n children: React.ReactNode;\n isLoading?: boolean;\n onClick?: () => void;\n disabled?: boolean;\n className?: string;\n}\n\nconst Button: React.FC<ButtonProps> = ({ children, isLoading, onClick, disabled, className = '' }) => {\n return (\n <button\n onClick={onClick}\n disabled={disabled || isLoading}\n className={`flex items-center justify-center px-4 py-2 bg-blue-600 text-white font-medium rounded-md transition-all disabled:opacity-70 ${className}`}\n >\n {isLoading && (\n <svg className=\"animate-spin -ml-1 mr-3 h-5 w-5 text-white\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n <circle className=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" strokeWidth=\"4\"></circle>\n <path className=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n </svg>\n )}\n {children}\n </button>\n );\n};\n\nexport default Button;", "metadata": {"category": "component_gen", "framework": "react", "complexity": "high"}}
{"instruction": "Create a sophisticated Input Group component that includes a prefix icon, the input field, and a suffix icon using React and Tailwind CSS.", "input": "", "output": "import React from 'react';\n\ninterface InputGroupProps {\n prefixIcon: React.ReactNode;\n suffixIcon: React.ReactNode;\n placeholder?: string;\n value?: string;\n onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;\n className?: string;\n}\n\nconst InputGroup: React.FC<InputGroupProps> = ({ prefixIcon, suffixIcon, placeholder, value, onChange, className = '' }) => {\n return (\n <div className={`relative flex items-center ${className}`}>\n <div className=\"absolute left-3 text-gray-400\">{prefixIcon}</div>\n <input\n type=\"text\"\n value={value}\n onChange={onChange}\n placeholder={placeholder}\n className=\"w-full pl-10 pr-10 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent\"\n />\n <div className=\"absolute right-3 text-gray-400\">{suffixIcon}</div>\n </div>\n );\n};\n\nexport default InputGroup;", "metadata": {"category": "component_gen", "framework": "react", "complexity": "high"}}
{"instruction": "Create a custom Checkbox component using Tailwind CSS that replaces the default browser checkbox with a styled version.", "input": "", "output": "import React from 'react';\n\ninterface CheckboxProps {\n checked: boolean;\n onChange: (checked: boolean) => void;\n label?: string;\n className?: string;\n}\n\nconst Checkbox: React.FC<CheckboxProps> = ({ checked, onChange, label, className = '' }) => {\n return (\n <label className={`flex items-center gap-2 cursor-pointer ${className}`}>\n <div className=\"relative\">\n <input\n type=\"checkbox\"\n className=\"sr-only\"\n checked={checked}\n onChange={(e) => onChange(e.target.checked)}\n />\n <div className={`w-5 h-5 border-2 rounded transition-colors ${checked ? 'bg-blue-600 border-blue-600' : 'border-gray-300 bg-white'}`}>\n {checked && (\n <svg className=\"w-full h-full text-white p-0.5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth=\"3\" d=\"M5 13l4 4L19 7\" />\n </svg>\n )}\n </div>\n </div>\n {label && <span className=\"text-sm text-gray-700\">{label}</span >}\n </label>\n );\n};\n\nexport default Checkbox;", "metadata": {"category": "component_gen", "framework": "react", "complexity": "medium"}}
{"instruction": "Create a Progress Bar component that accepts a 'progress' prop (0-100) and uses Tailwind CSS for styling.", "input": "", "output": "import React from 'react';\n\ninterface ProgressBarProps {\n progress: number;\n color?: string;\n className?: string;\n}\n\nconst ProgressBar: React.FC<ProgressBarProps> = ({ progress, color = 'bg-blue-600', className = '' }) => {\n const clampedProgress = Math.min(Math.max(progress, 0), 100);\n\n return (\n <div className={`w-full h-2.5 bg-gray-200 rounded-full overflow-hidden ${className}`}>\n <div\n className={`h-full transition-all duration-300 ease-out ${color}`}\n style={{ width: `${clampedProgress}%` }}\n />\n </div>\n );\n};\n\nexport default ProgressBar;", "metadata": {"category": "component_gen", "framework": "react", "complexity": "medium"}}
{"instruction": "Create a Toggle Switch component using React and Tailwind CSS with smooth transition animations.", "input": "", "output": "import React from 'react';\n\ninterface ToggleProps {\n enabled: boolean;\n onToggle: (enabled: boolean) => void;\n className?: string;\n}\n\nconst ToggleSwitch: React.FC<ToggleProps> = ({ enabled, onToggle, className = '' }) => {\n return (\n <button\n onClick={() => onToggle(!enabled)}\n className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none ${enabled ? 'bg-blue-600' : 'bg-gray-200'} ${className}`}\n >\n <span\n className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${enabled ? 'translate-x-6' : 'translate-x-1'}`}\n />\n </button>\n );\n};\n\nexport default ToggleSwitch;", "metadata": {"category": "component_gen", "framework": "react", "complexity": "high"}}
{"instruction": "Create a responsive Navbar component using React and Tailwind CSS. It should include a logo, links for Home, About, and Contact, and a mobile hamburger menu.", "input": "", "output": "import React, { useState } from 'react';\n\nconst Navbar = () => {\n const [isOpen, setIsOpen] = useState(false);\n\n return (\n <nav className=\"bg-white shadow-md\">\n <div className=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div className=\"flex justify-between h-16 items-center\">\n <div className=\"flex-shrink-0 font-bold text-xl text-blue-600\">Logo</div>\n <div className=\"hidden md:flex space-x-8\">\n <a href=\"#\" className=\"text-gray-700 hover:text-blue-600\">Home</a>\n <a href=\"#\" className=\"text-gray-700 hover:text-blue-600\">About</a>\n <a href=\"#\" className=\"text-gray-700 hover:text-blue-600\">Contact</a>\n </div>\n <div className=\"md:hidden\">\n <button onClick={() => setIsOpen(!isOpen)} className=\"text-gray-700\">\n <svg className=\"h-6 w-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth=\"2\" d=\"M4 6h16M4 12h16m-7 6h7\" /></svg>\n </button>\n </div>\n </div>\n </div>\n {isOpen && (\n <div className=\"md:hidden bg-white border-t border-gray-100 px-2 pt-2 pb-3 space-y-1\">\n <a href=\"#\" className=\"block px-3 py-2 text-gray-700 hover:bg-blue-50\">Home</a>\n <a href=\"#\" className=\"block px-3 py-2 text-gray-700 hover:bg-blue-50\">About</a>\n <a href=\"#\" className=\"block px-3 py-2 text-gray-700 hover:bg-blue-50\">Contact</a>\n </div>\n )}\n </nav>\n );\n};\n\nexport default Navbar;", "metadata": {"category": "layout", "framework": "react", "complexity": "low"}}
{"instruction": "Create a responsive 3-column card grid using React and Tailwind CSS.", "input": "", "output": "import React from 'react';\n\nconst CardGrid = ({ items }) => {\n return (\n <div className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 p-6\">\n {items.map(item => (\n <div key={item.id} className=\"bg-white rounded-lg shadow p-6\">\n <h3 className=\"text-lg font-semibold mb-2\">{item.title}</h3>\n <p className=\"text-gray-600\">{item.description}</p>\n </div>\n ))}\n </div>\n );\n};\n\nexport default CardGrid;", "metadata": {"category": "layout", "framework": "react", "complexity": "low"}}
{"instruction": "Create a collapsible sidebar component using React and Tailwind CSS.", "input": "", "output": "import React, { useState } from 'react';\n\nconst Sidebar = () => {\n const [isCollapsed, setIsCollapsed] = useState(false);\n\n return (\n <div className={`h-screen bg-gray-800 text-white transition-all duration-300 ${isCollapsed ? 'w-20' : 'w-64'} flex flex-col`}>\n <div className=\"p-4 font-bold text-xl border-b border-gray-700 flex justify-between items-center\">\n {!isCollapsed && <span>Dashboard</span>}\n <button onClick={() => setIsCollapsed(!isCollapsed)} className=\"p-1 hover:bg-gray-700 rounded\">\n <svg className=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth=\"2\" d=\"M4 6h16M4 12h16M4 18h16\" /></svg>\n </button>\n </div>\n <nav className=\"flex-1 p-4 space-y-4\">\n <div className=\"flex items-center space-x-4\">\n <div className=\"w-6 h-6 bg-blue-500 rounded\"></div>\n {!isCollapsed && <span>Home</span>}\n </div>\n <div className=\"flex items-center space-x-4\">\n <div className=\"w-6 h-6 bg-green-500 rounded\"></div>\n {!isCollapsed && <span>Analytics</span>}\n </div>\n </nav>\n </div>\n );\n};\n\nexport default Sidebar;", "metadata": {"category": "layout", "framework": "react", "complexity": "medium"}}
{"instruction": "Create a dashboard shell component with a top header and a sidebar.", "input": "", "output": "import React from 'react';\n\nconst DashboardShell = ({ children }) => {\n return (\n <div className=\"flex h-screen bg-gray-100\">\n <div className=\"w-64 bg-gray-800 text-white hidden md:block\">Sidebar</div>\n <div className=\"flex-1 flex flex-col\">\n <header className=\"h-16 bg-white shadow-sm flex items-center px-6\">Header</header>\n <main className=\"flex-1 overflow-auto p-6\">{children}</main>\n </div>\n </div>\n );\n};\n\nexport default DashboardShell;", "metadata": {"category": "layout", "framework": "react", "complexity": "medium"}}
{"instruction": "Create a Holy Grail layout using React and Tailwind CSS.", "input": "", "output": "import React from 'react';\n\nconst HolyGrailLayout = ({ children }) => {\n return (\n <div className=\"grid grid-rows-[auto_1fr_auto] grid-cols-[auto_1fr_auto] min-h-screen\">\n <header className=\"col-span-3 bg-blue-600 text-white p-4\">Header</header>\n <aside className=\"row-span-2 bg-gray-200 p-4\">Sidebar</aside>\n <main className=\"bg-white p-4\">{children}</main>\n <aside className=\"bg-gray-200 p-4\">Extra Sidebar</aside>\n <footer className=\"col-span-3 bg-gray-800 text-white p-4\">Footer</footer>\n </div>\n );\n};\n\nexport default HolyGrailLayout;", "metadata": {"category": "layout", "framework": "react", "complexity": "medium"}}
{"instruction": "Create a split-screen layout component.", "input": "", "output": "import React from 'react';\n\nconst SplitScreen = ({ left, right }) => {\n return (\n <div className=\"flex h-screen\">\n <div className=\"flex-1 bg-blue-50 p-8\">{left}</div>\n <div className=\"flex-1 bg-white p-8\">{right}</div>\n </div>\n );\n};\n\nexport default SplitScreen;", "metadata": {"category": "layout", "framework": "react", "complexity": "low"}}
{"instruction": "Create a complex dashboard layout with a nested navigation and multiple widgets.", "input": "", "output": "import React from 'react';\n\nconst ComplexDashboard = () => {\n return (\n <div className=\"flex h-screen bg-gray-100\">\n <aside className=\"w-64 bg-gray-900 text-white p-4 hidden lg:block\">\n <div className=\"font-bold mb-8\">Admin Panel</div>\n <nav className=\"space-y-2\">\n <div className=\"text-sm text-gray-400 uppercase\">Main</div>\n <div className=\"p-2 bg-blue-600 rounded\">Dashboard</div>\n <div className=\"p-2 hover:bg-gray-800 rounded\">Users</div>\n <div className=\"mt-8 text-sm text-gray-400 uppercase\">Settings</div>\n <div className=\"p-2 hover:bg-gray-800 rounded\">Profile</div>\n </nav>\n </aside>\n <div className=\"flex-1 flex flex-col\">\n <header className=\"h-16 bg-white border-b flex items-center justify-between px-8\">\n <h1 className=\"text-xl font-semibold\">Dashboard Overview</h1>\n <div className=\"w-10 h-10 rounded-full bg-gray-300\"></div>\n </header>\n <main className=\"p-8 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6\">\n <div className=\"h-32 bg-white rounded-lg shadow p-4\">Widget 1</div>\n <div className=\"h-32 bg-white rounded-lg shadow p-4\">Widget 2</div>\n <div className=\"h-32 bg-white rounded-lg shadow p-4\">Widget 3</div>\n <div className=\"col-span-full h-64 bg-white rounded-lg shadow p-4\">Main Chart</div>\n </main>\n </div>\n </div>\n );\n};\n\nexport default ComplexDashboard;", "metadata": {"category": "layout", "framework": "react", "complexity": "high"}}
{"instruction": "Create a Bento Box grid layout using Tailwind CSS.", "input": "", "output": "import React from 'react';\n\nconst BentoGrid = () => {\n return (\n <div className=\"grid grid-cols-4 grid-rows-2 gap-4 p-4 h-screen\">\n <div className=\"col-span-2 row-span-2 bg-blue-500 rounded-3xl p-6 text-white\">Main Feature</div>\n <div className=\"col-span-2 row-span-1 bg-purple-500 rounded-3xl p-6 text-white\">Secondary</div>\n <div className=\"col-span-1 row-span-1 bg-pink-500 rounded-3xl p-6 text-white\">Small</div>\n <div className=\"col-span-1 row-span-1 bg-orange-500 rounded-3xl p-6 text-white\">Small</div>\n </div>\n );\n};\n\nexport default BentoGrid;", "metadata": {"category": "layout", "framework": "react", "complexity": "high"}}
{"instruction": "Create a multi-level sidebar component.", "input": "", "output": "import React, { useState } from 'react';\n\nconst MultiLevelSidebar = () => {\n const [openSubmenu, setOpenSubmenu] = useState<string | null>(null);\n\n const toggleSubmenu = (name: string) => {\n setOpenSubmenu(openSubmenu === name ? null : name);\n };\n\n return (\n <div className=\"w-64 h-screen bg-gray-900 text-gray-300 p-4\">\n <div className=\"font-bold text-white mb-6\">App Name</div>\n <nav className=\"space-y-2\">\n <div className=\"p-2 hover:bg-gray-800 rounded cursor-pointer\">Dashboard</div>\n <div>\n <div \n onClick={() => toggleSubmenu('projects')} \n className=\"p-2 hover:bg-gray-800 rounded cursor-pointer flex justify-between items-center\"\n >\n Projects\n <span>{openSubmenu === 'projects' ? '▼' : '▶'}</span>\n </div>\n {openSubmenu === 'projects' && (\n <div className=\"ml-4 mt-2 space-y-1\">\n <div className=\"p-2 text-sm hover:bg-gray-800 rounded cursor-pointer\">Active</div>\n <div className=\"p-2 text-sm hover:bg-gray-800 rounded cursor-pointer\">Archived</div>\n </div>\n )}\n </div>\n </nav>\n </div>\n );\n};\n\nexport default MultiLevelSidebar;", "metadata": {"category": "layout", "framework": "react", "complexity": "high"}}
{"instruction": "Create a multi-step onboarding layout component.", "input": "", "output": "import React from 'react';\n\nconst OnboardingLayout = ({ step, children }) => {\n const steps = ['Welcome', 'Profile', 'Preferences', 'Finish'];\n\n return (\n <div className=\"min-h-screen bg-gray-50 flex flex-col items-center justify-center p-4\">\n <div className=\"w-full max-w-md bg-white rounded-2xl shadow-xl overflow-hidden\">\n <div className=\"bg-blue-600 p-6 text-white text-center\">\n <h2 className=\"text-xl font-bold\">{steps[step]}</h2>\n <div className=\"mt-4 flex justify-center space-x-2\">\n {steps.map((_, i) => (\n <div key={i} className={`h-1 w-8 rounded-full ${i <= step ? 'bg-white' : 'bg-blue-400'}`} />\n ))}\n </div>\n </div>\n <div className=\"p-8\">\n {children}\n </div>\n </div>\n </div>\n );\n};\n\nexport default OnboardingLayout;", "metadata": {"category": "layout", "framework": "react", "complexity": "high"}}
{"instruction": "Refactor this class-based React component into a functional component using Hooks.", "input": "import React, { Component } from 'react';\n\nclass Counter extends Component {\n state = { count: 0 };\n increment = () => this.setState({ count: this.state.count + 1 });\n render() {\n return <button onClick={this.increment}>{this.state.count}</button>;\n }\n}\nexport default Counter;", "output": "import React, { useState } from 'react';\n\nconst Counter = () => {\n const [count, setCount] = useState(0);\n return <button onClick={() => setCount(count + 1)}>{count}</button>;\n};\n\nexport default Counter;", "metadata": {"category": "refactor", "framework": "react", "complexity": "low"}}
{"instruction": "Refactor this CSS-in-JS component to use Tailwind CSS classes.", "input": "const StyledDiv = styled.div`background-color: blue; color: white; padding: 16px; border-radius: 8px;`;", "output": "<div className=\"bg-blue-600 text-white p-4 rounded-lg\"></div>", "metadata": {"category": "refactor", "framework": "react", "complexity": "low"}}
{"instruction": "Refactor this complex conditional rendering into a more readable pattern using early returns.", "input": "const MyComponent = ({ isLoading, error, data }) => {\n if (isLoading) {\n return <p>Loading...</p>;\n } else if (error) {\n return <p>Error!</p>;\n } else {\n return <div>{data.name}</div>;\n }\n};", "output": "const MyComponent = ({ isLoading, error, data }) => {\n if (isLoading) return <p>Loading...</p>;\n if (error) return <p>Error!</p>;\n return <div>{data.name}</div>;\n};", "metadata": {"category": "refactor", "framework": "react", "complexity": "low"}}
{"instruction": "Refactor this prop-drilling pattern to use React Context API.", "input": "const App = () => { const user = { name: 'John' }; return <Layout user={user} />; };\nconst Layout = ({ user }) => <Header user={user} />;\nconst Header = ({ user }) => <div>{user.name}</div>;", "output": "import React, { createContext, useContext } from 'react';\n\nconst UserContext = createContext();\n\nconst App = () => {\n const user = { name: 'John' };\n return (\n <UserContext.Provider value={user}>\n <Layout />\n </UserContext.Provider>\n );\n};\n\nconst Layout = () => <Header />;\n\nconst Header = () => {\n const user = useContext(UserContext);\n return <div>{user.name}</div>;\n};\n\nexport default App;", "metadata": {"category": "refactor", "framework": "react", "complexity": "high"}}
{"instruction": "Refactor this large component by extracting sub-components.", "input": "const BigComponent = () => {\n return (\n <div>\n <header><h1>Title</h1></header>\n <main><p>Content</p></main>\n <footer><p>Footer</p></footer>\n </div>\n );\n};", "output": "const Header = () => <header><h1>Title</h1></header>;\nconst Main = () => <main><p>Content</p></main>;\nconst Footer = () => <footer><p>Footer</p></footer>;\n\nconst BigComponent = () => (\n <div>\n <Header />\n <Main />\n <Footer />\n </div>\n);", "metadata": {"category": "refactor", "framework": "react", "complexity": "medium"}}
{"instruction": "Refactor this imperative DOM manipulation to use React state.", "input": "const btn = document.getElementById('btn');\nbtn.addEventListener('click', () => {\n document.getElementById('text').innerText = 'Clicked!';\n});", "output": "import React, { useState } from 'react';\n\nconst MyComponent = () => {\n const [text, setText] = useState('Initial');\n return (\n <>\n <p>{text}</p>\n <button onClick={() => setText('Clicked!')}>Click me</button>\n </>\n );\n};", "metadata": {"category": "refactor", "framework": "react", "complexity": "medium"}}
{"instruction": "Refactor this nested ternary operator into a more readable structure.", "input": "const status = isError ? 'error' : isSuccess ? 'success' : 'idle';", "output": "const getStatus = () => {\n if (isError) return 'error';\n if (isSuccess) return 'success';\n return 'idle';\n};\nconst status = getStatus();", "metadata": {"category": "refactor", "framework": "react", "complexity": "medium"}}
{"instruction": "Refactor this manual loop to use the .map() function.", "input": "const items = ['a', 'b', 'c'];\nconst list = [];\nfor (let i = 0; i < items.length; i++) {\n list.push(<li key={i}>{items[i]}</li>);\n}\nreturn <ul>{list}</ul>;", "output": "const items = ['a', 'b', 'c'];\nreturn <ul>{items.map((item, i) => <li key={i}>{item}</li>)}</ul>;", "metadata": {"category": "refactor", "framework": "react", "complexity": "low"}}
{"instruction": "Refactor this component to use TypeScript interfaces for props.", "input": "const User = ({ name, age }) => <div>{name} ({age})</div>;", "output": "interface UserProps {\n name: string;\n age: number;\n}\n\nconst User: React.FC<UserProps> = ({ name, age }) => <div>{name} ({age})</div>;", "metadata": {"category": "refactor", "framework": "react", "complexity": "medium"}}
{"instruction": "Refactor this useEffect that fetches data to use a custom hook.", "input": "const DataComp = () => {\n const [data, setData] = useState(null);\n useEffect(() => {\n fetch('/api').then(r => r.json()).then(setData);\n }, []);\n return <div>{data}</div>;\n};", "output": "const useFetch = (url) => {\n const [data, setData] = useState(null);\n useEffect(() => {\n fetch(url).then(r => r.json()).then(setData);\n }, [url]);\n return data;\n};\n\nconst DataComp = () => {\n const data = useFetch('/api');\n return <div>{data}</div>;\n};", "metadata": {"category": "refactor", "framework": "react", "complexity": "high"}}
{"instruction": "Add ARIA attributes to this non-semantic button element to make it accessible.", "input": "<div onClick={handleClick} className=\"btn\">Click Me</div>", "output": "<button onClick={handleClick} aria-label=\"Click Me\" className=\"btn\">Click Me</button>", "metadata": {"category": "a11y", "framework": "react", "complexity": "low"}}
{"instruction": "Add keyboard navigation support to this custom dropdown component.", "input": "const Dropdown = () => {\n return (\n <div className=\"dropdown\">\n <div onClick={toggle}>Menu</div>\n {isOpen && <ul><li>Item 1</li><li>Item 2</li></ul>}\n </div>\n );\n};", "output": "import React, { useState } from 'react';\n\nconst Dropdown = () => {\n const [isOpen, setIsOpen] = useState(false);\n const [activeIndex, setActiveIndex] = useState(-1);\n\n const handleKeyDown = (e) => {\n if (e.key === 'Enter' || e.key === ' ') {\n setIsOpen(!isOpen);\n } else if (e.key === 'ArrowDown') {\n setActiveIndex(prev => (prev < 1 ? prev + 1 : 0));\n } else if (e.key === 'ArrowUp') {\n setActiveIndex(prev => (prev > 0 ? prev - 1 : 1));\n } else if (e.key === 'Escape') {\n setIsOpen(false);\n }\n };\n\n return (\n <div className=\"dropdown\" onKeyDown={handleKeyDown} tabIndex=\"0\" role=\"menu\" aria-haspopup=\"true\" aria-expanded={isOpen}>\n <div role=\"menuitem\" onClick={() => setIsOpen(!isOpen)}>Menu</div>\n {isOpen && (\n <ul role=\"menu\">\n <li role=\"menuitem\" aria-selected={activeIndex === 0}>Item 1</li>\n <li role=\"menuitem\" aria-selected={activeIndex === 1}>Item 2</li>\n </ul>\n )}\n </div>\n );\n};", "metadata": {"category": "a11y", "framework": "react", "complexity": "high"}}
{"instruction": "Improve the semantic HTML of this component.", "input": "<div className=\"header\"><h1>Title</h1></div><div className=\"content\"><p>Text</p></div><div className=\"footer\"><p>Footer</p></div>", "output": "<header><h1>Title</h1></header>\n<main>\n <p>Text</p>\n</main>\n<footer><p>Footer</p></footer>", "metadata": {"category": "a11y", "framework": "react", "complexity": "low"}}
{"instruction": "Add aria-live regions to this notification component to ensure screen readers announce new messages.", "input": "const Notification = ({ message }) => <div className=\"toast\">{message}</div>;", "output": "const Notification = ({ message }) => (\n <div className=\"toast\" aria-live=\"polite\" role=\"status\">\n {message}\n </div>\n);", "metadata": {"category": "a11y", "framework": "react", "complexity": "medium"}}
{"instruction": "Add alt text to these images to improve accessibility.", "input": "<img src=\"logo.png\" /><img src=\"user.jpg\" />", "output": "<img src=\"logo.png\" alt=\"Company Logo\" /><img src=\"user.jpg\" alt=\"User Profile Picture\" />", "metadata": {"category": "a11y", "framework": "react", "complexity": "low"}}
{"instruction": "Ensure this form input is correctly associated with its label using htmlFor.", "input": "<label>Username</label><input type=\"text\" />", "output": "<label htmlFor=\"username\">Username</label><input id=\"username\" type=\"text\" />", "metadata": {"category": "a11y", "framework": "react", "complexity": "low"}}
{"instruction": "Add aria-describedby to link an input with its error message.", "input": "<input type=\"text\" /><p id=\"err\">Invalid email</p>", "output": "<input type=\"text\" aria-describedby=\"err\" /><p id=\"err\">Invalid email</p>", "metadata": {"category": "a11y", "framework": "react", "complexity": "medium"}}
{"instruction": "Add role='img' and aria-label to a decorative SVG icon.", "input": "<svg>...</svg>", "output": "<svg role=\"img\" aria-label=\"Search Icon\">...</svg>", "metadata": {"category": "a11y", "framework": "react", "complexity": "low"}}
{"instruction": "Implement focus management for a modal component: ensure focus moves to the modal when it opens.", "input": "const Modal = ({ isOpen, children }) => {\n return isOpen ? <div className=\"modal\">{children}</div> : null;\n};", "output": "import React, { useEffect, useRef } from 'react';\n\nconst Modal = ({ isOpen, children }) => {\n const modalRef = useRef(null);\n\n useEffect(() => {\n if (isOpen) {\n modalRef.current?.focus();\n }\n }, [isOpen]);\n\n if (!isOpen) return null;\n\n return (\n <div className=\"modal\" tabIndex=\"-1\" ref={modalRef}>\n {children}\n </div>\n );\n};\n\nexport default Modal;", "metadata": {"category": "a11y", "framework": "react", "complexity": "high"}}
{"instruction": "Add aria-expanded to a collapsible accordion component.", "input": "const Accordion = ({ isOpen, toggle }) => (\n <div>\n <div onClick={toggle}>Title</div>\n {isOpen && <div>Content</div>}\n </div>\n);", "output": "const Accordion = ({ isOpen, toggle }) => (\n <div>\n <div onClick={toggle} aria-expanded={isOpen} role=\"button\" tabIndex=\"0\" onKeyDown={(e) => e.key === 'Enter' && toggle()}>Title</div>\n {isOpen && <div role=\"region\">Content</div>}\n </div>\n);", "metadata": {"category": "a11y", "framework": "react", "complexity": "medium"}}
{"instruction": "Create a Button component that handles a 'loading' state. When loading is true, the button should be disabled and display a spinner icon.", "input": "", "output": "import React from 'react';\n\ninterface ButtonProps {\n children: React.ReactNode;\n isLoading?: boolean;\n onClick?: () => void;\n disabled?: boolean;\n className?: string;\n}\n\nconst Button: React.FC<ButtonProps> = ({ children, isLoading, onClick, disabled, className = '' }) => {\n return (\n <button\n onClick={onClick}\n disabled={disabled || isLoading}\n className={`flex items-center justify-center px-4 py-2 bg-blue-600 text-white font-medium rounded-md transition-all disabled:opacity-70 ${className}`}\n >\n {isLoading && (\n <svg className=\"animate-spin -ml-1 mr-3 h-5 w-5 text-white\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n <circle className=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" strokeWidth=\"4\"></circle>\n <path className=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n </svg>\n )}\n {children}\n </button>\n );\n};\n\nexport default Button;", "metadata": {"category": "state_ui", "framework": "react", "complexity": "high"}}
{"instruction": "Create a Data Table component that handles 'loading', 'error', and 'empty' states based on a 'status' prop.", "input": "", "output": "import React from 'react';\n\ninterface DataRow { id: string; name: string; email: string; }\n\ninterface DataTableProps {\n status: 'loading' | 'error' | 'empty' | 'success';\n data?: DataRow[];\n errorMsg?: string;\n}\n\nconst DataTable: React.FC<DataTableProps> = ({ status, data = [], errorMsg }) => {\n if (status === 'loading') return <div className=\"p-8 text-center text-gray-500\">Loading data...</div>;\n if (status === 'error') return <div className=\"p-8 text-center text-red-500\">Error: {errorMsg}</div>;\n if (status === 'empty') return <div className=\"p-8 text-center text-gray-500\">No data available.</div>;\n\n return (\n <div className=\"overflow-x-auto\">\n <table className=\"min-w-full divide-y divide-gray-200\">\n <thead className=\"bg-gray-50\">\n <tr>\n <th className=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase\">Name</th>\n <th className=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase\">Email</th>\n </tr>\n </thead>\n <tbody className=\"bg-white divide-y divide-gray-200\">\n {data.map((row) => (\n <tr key={row.id}>\n <td className=\"px-6 py-4 whitespace-nowrap text-sm text-gray-900\">{row.name}</td>\n <td className=\"px-6 py-4 whitespace-nowrap text-sm text-gray-500\">{row.email}</td>\n </tr>\n ))}\n </tbody>\n </table>\n </div>\n );\n};\n\nexport default DataTable;", "metadata": {"category": "state_ui", "framework": "react", "complexity": "high"}}
{"instruction": "Create a SearchInput component that manages a 'loading' state while a search is being performed (simulated with a debounce).", "input": "", "output": "import React, { useState, useEffect } from 'react';\n\ninterface SearchInputProps {\n onSearch: (query: string) => void;\n}\n\nconst SearchInput: React.FC<SearchInputProps> = ({ onSearch }) => {\n const [query, setQuery] = useState('');\n const [isLoading, setIsLoading] = useState(false);\n\n useEffect(() => {\n const timer = setTimeout(() => {\n if (query) {\n setIsLoading(true);\n onSearch(query);\n setTimeout(() => setIsLoading(false), 500); // Simulate API delay\n }\n }, 500);\n\n return () => clearTimeout(timer);\n }, [query, onSearch]);\n\n return (\n <div className=\"relative\">\n <input\n type=\"text\"\n value={query}\n onChange={(e) => setQuery(e.target.value)}\n placeholder=\"Search...\"\n className=\"w-full px-4 py-2 border rounded-md focus:ring-2 focus:ring-blue-500 outline-none\"\n />\n {isLoading && (\n <div className=\"absolute right-3 top-2.5\">\n <svg className=\"animate-spin h-5 w-5 text-gray-400\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n <circle className=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" strokeWidth=\"4\"></circle>\n <path className=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n </svg>\n </div>\n )}\n </div>\n );\n};\n\nexport default SearchInput;", "metadata": {"category": "state_ui", "framework": "react", "complexity": "high"}}
{"instruction": "Create an InfiniteScroll component that manages 'loading more' and 'end of list' states.", "input": "", "output": "import React, { useEffect } from 'react';\n\ninterface InfiniteScrollProps {\n fetchMore: () => void;\n hasMore: boolean;\n isLoading: boolean;\n children: React.ReactNode;\n}\n\nconst InfiniteScroll: React.FC<InfiniteScrollProps> = ({ fetchMore, hasMore, isLoading, children }) => {\n useEffect(() => {\n const handleScroll = () => {\n if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 100 && hasMore && !isLoading) {\n fetchMore();\n }\n };\n window.addEventListener('scroll', handleScroll);\n return () => window.removeEventListener('scroll', handleScroll);\n }, [hasMore, isLoading, fetchMore]);\n\n return (\n <div>\n {children}\n {isLoading && <div className=\"p-4 text-center text-gray-500\">Loading more...</div>}\n {!hasMore && <div className=\"p-4 text-center text-gray-400\">You've reached the end.</div>}\n </div>\n );\n};\n\nexport default InfiniteScroll;", "metadata": {"category": "state_ui", "framework": "react", "complexity": "high"}}
{"instruction": "Create a multi-step form component using React and Tailwind CSS. It should manage the current step and provide 'Next' and 'Previous' buttons, with a progress indicator.", "input": "", "output": "import React, { useState } from 'react';\n\nconst MultiStepForm = () => {\n const [step, setStep] = useState(0);\n const steps = ['Account', 'Profile', 'Payment', 'Review'];\n\n const nextStep = () => setStep(s => Math.min(s + 1, steps.length - 1));\n const prevStep = () => setStep(s => Math.max(s - 1, 0));\n\n return (\n <div className=\"max-w-md mx-auto bg-white p-8 rounded-xl shadow-md\">\n <div className=\"flex justify-between mb-8\">\n {steps.map((_, i) => (\n <div key={i} className={`h-2 w-full mx-1 rounded-full ${i <= step ? 'bg-blue-600' : 'bg-gray-200'}`} />\n ))}\n </div>\n <div className=\"mb-8 text-center font-bold text-lg\">{steps[step]}</div>\n <div className=\"h-32 mb-8 bg-gray-50 rounded flex items-center justify-center\">Form Content</div>\n <div className=\"flex justify-between\">\n <button onClick={prevStep} disabled={step === 0} className=\"px-4 py-2 text-gray-600 disabled:opacity-50\">Previous</button>\n <button onClick={nextStep} disabled={step === steps.length - 1} className=\"px-4 py-2 bg-blue-600 text-white rounded disabled:opacity-50\">Next</button>\n </div>\n </div>\n );\n};\n\nexport default MultiStepForm;", "metadata": {"category": "state_ui", "framework": "react", "complexity": "high"}}
{"instruction": "Create a Modal component that handles focus trapping and close on Escape key.", "input": "", "output": "import React, { useEffect, useRef } from 'react';\n\nconst Modal = ({ isOpen, onClose, title, children }) => {\n const modalRef = useRef(null);\n\n useEffect(() => {\n const handleKeyDown = (e) => {\n if (e.key === 'Escape') onClose();\n };\n if (isOpen) {\n document.addEventListener('keydown', handleKeyDown);\n document.body.style.overflow = 'hidden';\n }\n return () => {\n document.removeEventListener('keydown', handleKeyDown);\n document.body.style.overflow = 'unset';\n };\n }, [isOpen, onClose]);\n\n if (!isOpen) return null;\n\n return (\n <div className=\"fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50\">\n <div ref={modalRef} className=\"bg-white rounded-lg shadow-xl max-w-md w-full overflow-hidden\" role=\"dialog\" aria-modal=\"true\">\n <div className=\"px-6 py-4 border-b flex justify-between items-center\">\n <h2 className=\"text-lg font-semibold\">{title}</h2>\n <button onClick={onClose} className=\"text-gray-400 hover:text-gray-600\">X</button>\n </div>\n <div className=\"px-6 py-4\">{children}</div>\n </div>\n </div>\n );\n};\n\nexport default Modal;", "metadata": {"category": "state_ui", "framework": "react", "complexity": "high"}}
{"instruction": "Create a Toggle Switch component using React and Tailwind CSS with smooth transition animations.", "input": "", "output": "import React from 'react';\n\ninterface ToggleProps {\n enabled: boolean;\n onToggle: (enabled: boolean) => void;\n className?: string;\n}\n\nconst ToggleSwitch: React.FC<ToggleProps> = ({ enabled, onToggle, className = '' }) => {\n return (\n <button\n onClick={() => onToggle(!enabled)}\n className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none ${enabled ? 'bg-blue-600' : 'bg-gray-200'} ${className}`}\n >\n <span\n className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${enabled ? 'translate-x-6' : 'translate-x-1'}`}\n />\n </button>\n );\n};\n\nexport default ToggleSwitch;", "metadata": {"category": "state_ui", "framework": "react", "complexity": "medium"}}
{"instruction": "Create a simple Toast notification component that appears when a 'show' prop is true.", "input": "", "output": "import React, { useEffect } from 'react';\n\nconst Toast = ({ show, message, onClose }) => {\n useEffect(() => {\n if (show) {\n const timer = setTimeout(onClose, 3000);\n return () => clearTimeout(timer);\n }\n }, [show, onClose]);\n\n if (!show) return null;\n\n return (\n <div className=\"fixed bottom-4 right-4 bg-gray-800 text-white px-4 py-2 rounded shadow-lg animate-bounce\">\n {message}\n </div>\n );\n};\n\nexport default Toast;", "metadata": {"category": "state_ui", "framework": "react", "complexity": "medium"}}
{"instruction": "Create a Tab component that manages active tab state.", "input": "", "output": "import React, { useState } from 'react';\n\nconst Tabs = ({ tabs }) => {\n const [activeTab, setActiveTab] = useState(0);\n\n return (\n <div>\n <div className=\"flex border-b\">\n {tabs.map((tab, i) => (\n <button\n key={i}\n onClick={() => setActiveTab(i)}\n className={`px-4 py-2 ${activeTab === i ? 'border-b-2 border-blue-600 text-blue-600' : 'text-gray-500'}`}\n >\n {tab.label}\n </button>\n ))}\n </div>\n <div className=\"p-4\">\n {tabs[activeTab].content}\n </div>\n </div>\n );\n};\n\nexport default Tabs;", "metadata": {"category": "state_ui", "framework": "react", "complexity": "medium"}}
{"instruction": "Create a simple dropdown menu that toggles visibility on click.", "input": "", "output": "import React, { useState } from 'react';\n\nconst Dropdown = () => {\n const [isOpen, setIsOpen] = useState(false);\n\n return (\n <div className=\"relative\">\n <button onClick={() => setIsOpen(!isOpen)} className=\"px-4 py-2 bg-gray-200 rounded\">Menu</button>\n {isOpen && (\n <ul className=\"absolute mt-2 w-48 bg-white border rounded shadow-lg\">\n <li className=\"px-4 py-2 hover:bg-gray-100 cursor-pointer\">Option 1</li>\n <li className=\"px-4 py-2 hover:bg-gray-100 cursor-pointer\">Option 2</li>\n </ul>\n )}\n </div>\n );\n};\n\nexport default Dropdown;", "metadata": {"category": "state_ui", "framework": "react", "complexity": "low"}}