import json
import os
file_path = os.path.expanduser('~/projects/web-dev-swarm/datasets/frontend/raw/frontend_gold_standard.jsonl')
data = [
{
"instruction": "Create a responsive Navbar component in React using Tailwind CSS. It should include a logo, links for 'Home', 'About', and 'Services', and a mobile hamburger menu.",
"input": "",
"output": "```tsx\nimport React, { useState } from 'react';\n\nconst Navbar: React.FC = () => {\n const [isOpen, setIsOpen] = useState(false);\n\n const navLinks = [\n { name: 'Home', href: '#' },\n { name: 'About', href: '#' },\n { name: 'Services', href: '#' },\n ];\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 flex items-center\">\n <span className=\"text-xl font-bold text-blue-600\">Logo</span>\n </div>\n <div className=\"hidden md:flex space-x-8\">\n {navLinks.map((link) => (\n <a key={link.name} href={link.href} className=\"text-gray-600 hover:text-blue-600 transition-colors\">\n {link.name}\n </a>\n ))}\n </div>\n <div className=\"md:hidden flex items-center\">\n <button\n onClick={() => setIsOpen(!isOpen)}\n className=\"text-gray-600 hover:text-blue-600 focus:outline-none\"\n >\n <svg className=\"h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n {isOpen ? (\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M6 18L18 6M6 6l12 12\" />\n ) : (\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M4 6h16M4 12h16M4 18h16\" />\n )}\n </svg>\n </button>\n </div>\n </div>\n </div>\n\n {/* Mobile Menu */}\n <div className={`${isOpen ? 'block' : 'hidden'} md:hidden bg-white border-t border-gray-200`}>\n <div className=\"px-2 pt-2 pb-3 space-y-1\">\n {navLinks.map((link) => (\n <a\n key={link.name}\n href={link.href}\n className=\"block px-3 py-2 text-base font-medium text-gray-600 hover:text-blue-600 hover:bg-gray-50 rounded-md\"\n >\n {link.name}\n </a>\n ))}\n </div>\n </div>\n </nav>\n );\n};\n\nexport default Navbar;\n```",
"metadata": {"category": "layout", "framework": "react", "complexity": "medium"}
},
{
"instruction": "Create a Sidebar component in React using Tailwind CSS. It should be collapsible and contain navigation links with icons.",
"input": "",
"output": "```tsx\nimport React, { useState } from 'react';\n\ninterface SidebarProps {\n items: { name: string; icon: React.ReactNode; href: string }[];\n}\n\nconst Sidebar: React.FC<SidebarProps> = ({ items }) => {\n const [isCollapsed, setIsCollapsed] = useState(false);\n\n return (\n <div className={`h-screen bg-gray-900 text-white transition-all duration-300 ${isCollapsed ? 'w-20' : 'w-64'} flex flex-col`}>\n <div className=\"p-4 flex items-center justify-between\">\n {!isCollapsed && <span className=\"font-bold text-xl\">Dashboard</span>}\n <button \n onClick={() => setIsCollapsed(!isCollapsed)}\n className=\"p-2 rounded-md hover:bg-gray-800 transition-colors\"\n >\n <svg className=\"w-6 h-6\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M4 6h16M4 12h16M4 18h16\" />\n </svg>\n </button>\n </div>\n <nav className=\"flex-1 px-2 py-4 space-y-2\">\n {items.map((item) => (\n <a\n key={item.name}\n href={item.href}\n className=\"flex items-center p-3 rounded-lg hover:bg-gray-800 transition-colors group\"\n >\n <span className=\"text-gray-400 group-hover:text-white\">{item.icon}</span>\n {!isCollapsed && <span className=\"ml-4\">{item.name}</span>}\n </a>\n ))}\n </nav>\n </div>\n );\n};\n\nexport default Sidebar;\n```",
"metadata": {"category": "layout", "framework": "react", "complexity": "medium"}
},
{
"instruction": "Create a responsive Grid Layout in React using Tailwind CSS that displays a set of items in a grid that adjusts columns based on screen size.",
"input": "",
"output": "```tsx\nimport React from 'react';\n\ninterface GridProps {\n items: React.ReactNode[];\n}\n\nconst GridLayout: React.FC<GridProps> = ({ items }) => {\n return (\n <div className=\"grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6 p-6\">\n {items.map((item, index) => (\n <div key={index} className=\"bg-white p-4 rounded-lg shadow-md\">\n {item}\n </div>\n ))}\n </div>\n );\n};\n\nexport default GridLayout;\n```",
"metadata": {"category": "layout", "framework": "react", "complexity": "low"}
},
{
"instruction": "Create a Hero Section in React using Tailwind CSS. It should have a large heading, a subtext, and a call-to-action button, with a background image.",
"input": "",
"output": "```tsx\nimport React from 'react';\n\nconst Hero: React.FC = () => {\n return (\n <div className=\"relative h-[500px] flex items-center justify-center text-center text-white\">\n <div \n className=\"absolute inset-0 bg-cover bg-center z-0\"\n style={{ backgroundImage: 'url(\"https://images.unsplash.com/photo-1497215728101-856f4ea42174?auto=format&fit=crop&w=1600&q=80\")' }}\n />\n <div className=\"absolute inset-0 bg-black bg-opacity-50 z-10\" />\n <div className=\"relative z-20 max-w-3xl px-4\">\n <h1 className=\"text-4xl md:text-6xl font-bold mb-4\">Build Something Amazing</h1>\n <p className=\"text-lg md:text-xl mb-8 text-gray-200\">The best platform for your next big idea. Fast, reliable, and scalable.</p>\n <button className=\"bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-full text-lg font-semibold transition-colors\">\n Get Started\n </button>\n </div>\n </div>\n );\n};\n\nexport default Hero;\n```",
"metadata": {"category": "layout", "framework": "react", "complexity": "medium"}
},
{
"instruction": "Create a Footer component in React using Tailwind CSS. It should have multiple columns for links and a copyright notice.",
"input": "",
"output": "```tsx\nimport React from 'react';\n\nconst Footer: React.FC = () => {\n return (\n <footer className=\"bg-gray-900 text-gray-300 py-12\">\n <div className=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div className=\"grid grid-cols-1 md:grid-cols-4 gap-8\">\n <div className=\"col-span-1 md:col-span-1\">\n <span className=\"text-2xl font-bold text-white\">Logo</span>\n <p className=\"mt-4 text-sm text-gray-400\">Making the web a better place, one component at a time.</p>\n </div>\n <div>\n <h3 className=\"text-sm font-semibold text-white uppercase tracking-wider\">Solutions</h3>\n <ul className=\"mt-4 space-y-2\">\n <li><a href=\"#\" className=\"hover:text-white\">Marketing</a></li>\n <li><a href=\"#\" className=\"hover:text-white\">Analytics</a></li>\n <li><a href=\"#\" className=\"hover:text-white\">Commerce</a></li>\n </ul>\n </div>\n <div>\n <h3 className=\"text-sm font-semibold text-white uppercase tracking-wider\">Support</h3>\n <ul className=\"mt-4 space-y-2\">\n <li><a href=\"#\" className=\"hover:text-white\">Pricing</a></li>\n <li><a href=\"#\" className=\"hover:text-white\">Documentation</a></li>\n <li><a href=\"#\" className=\"hover:text-white\">Guides</a></li>\n </ul>\n </div>\n <div>\n <h3 className=\"text-sm font-semibold text-white uppercase tracking-wider\">Company</h3>\n <ul className=\"mt-4 space-y-2\">\n <li><a href=\"#\" className=\"hover:text-white\">About</a></li>\n <li><a href=\"#\" className=\"hover:text-white\">Blog</a></li>\n <li><a href=\"#\" className=\"hover:text-white\">Jobs</a></li>\n </ul>\n </div>\n </div>\n <div className=\"mt-12 pt-8 border-t border-gray-800 text-center text-sm text-gray-500\">\n © {new Date().getFullYear()} Your Company, Inc. All rights reserved.\n </div>\n </div>\n </footer>\n );\n};\n\nexport default Footer;\n```",
"metadata": {"category": "layout", "framework": "react", "complexity": "low"}
},
{
"instruction": "Create a Dashboard Layout in React using Tailwind CSS. It should include a fixed sidebar and a scrollable main content area.",
"input": "",
"output": "```tsx\nimport React from 'react';\n\nconst DashboardLayout: React.FC<{ children: React.ReactNode }> = ({ children }) => {\n return (\n <div className=\"flex h-screen bg-gray-100 overflow-hidden\">\n {/* Sidebar */}\n <aside className=\"w-64 bg-gray-900 text-white hidden md:flex flex-col\">\n <div className=\"p-6 text-2xl font-bold\">Admin</div>\n <nav className=\"flex-1 px-4 space-y-2\">\n <a href=\"#\" className=\"block p-3 rounded bg-gray-800\">Dashboard</a>\n <a href=\"#\" className=\"block p-3 rounded hover:bg-gray-800\">Users</a>\n <a href=\"#\" className=\"block p-3 rounded hover:bg-gray-800\">Settings</a>\n </nav>\n </aside>\n\n {/* Main Content */}\n <div className=\"flex-1 flex flex-col overflow-hidden\">\n <header className=\"h-16 bg-white shadow-sm flex items-center justify-between px-8\">\n <h2 className=\"text-xl font-semibold text-gray-800\">Overview</h2>\n <div className=\"flex items-center gap-4\">\n <div className=\"w-8 h-8 rounded-full bg-blue-500\"></div>\n <span className=\"text-sm font-medium text-gray-700\">John Doe</span>\n </div>\n </header>\n <main className=\"flex-1 overflow-y-auto p-8\">\n {children}\n </main>\n </div>\n </div>\n );\n};\n\nexport default DashboardLayout;\n```",
"metadata": {"category": "layout", "framework": "react", "complexity": "high"}
},
{
"instruction": "Create a Responsive Card Grid in React using Tailwind CSS. It should display cards in a grid that changes from 1 to 2 to 3 columns based on screen size.",
"input": "",
"output": "```tsx\nimport React from 'react';\n\ninterface CardProps {\n title: string;\n content: string;\n}\n\nconst CardGrid: React.FC<{ cards: CardProps[] }> = ({ cards }) => {\n return (\n <div className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 p-4\">\n {cards.map((card, index) => (\n <div key={index} className=\"bg-white rounded-xl shadow-lg p-6 border border-gray-100\">\n <h3 className=\"text-lg font-bold text-gray-900 mb-2\">{card.title}</h3>\n <p className=\"text-gray-600\">{card.content}</p>\n </div>\n ))}\n </div>\n );\n};\n\nexport default CardGrid;\n```",
"metadata": {"category": "layout", "framework": "react", "complexity": "medium"}
},
{
"instruction": "Create a Split Screen Layout in React using Tailwind CSS. One side should be for an image and the other for text content.",
"input": "",
"output": "```tsx\nimport React from 'react';\n\nconst SplitScreen: React.FC = () => {\n return (\n <div className=\"flex flex-col md:flex-row h-screen\">\n <div className=\"md:w-1/2 h-64 md:h-full\">\n <img \n src=\"https://images.unsplash.com/photo-1497366216548-37526070297c?auto=format&fit=crop&w=800&q=80\" \n alt=\"Office\" \n className=\"w-full h-full object-cover\"\n />\n </div>\n <div className=\"md:w-1/2 h-full flex items-center justify-center p-12 bg-gray-50\">\n <div className=\"max-w-md\">\n <h2 className=\"text-4xl font-bold text-gray-900 mb-6\">Modern Workspace</h2>\n <p className=\"text-lg text-gray-600 mb-8\">\n Experience the next generation of productivity with our beautifully designed workspace solutions.\n </p>\n <button className=\"bg-blue-600 text-white px-6 py-3 rounded-lg font-semibold hover:bg-blue-700 transition-colors\">\n Learn More\n </button>\n </div>\n </div>\n </div>\n );\n};\n\nexport default SplitScreen;\n```",
"metadata": {"category": "layout", "framework": "react", "complexity": "medium"}
},
{
"instruction": "Create a Sticky Header component in React using Tailwind CSS. The header should stay at the top of the page as the user scrolls.",
"input": "",
"output": "```tsx\nimport React from 'react';\n\nconst StickyHeader: React.FC = () => {\n return (\n <header className=\"sticky top-0 z-50 w-full bg-white/80 backdrop-blur-md border-b border-gray-200\">\n <div className=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between\">\n <div className=\"text-xl font-bold text-blue-600\">StickyBrand</div>\n <nav className=\"hidden md:flex space-x-6\">\n <a href=\"#\" className=\"text-gray-600 hover:text-blue-600\">Home</a>\n <a href=\"#\" className=\"text-gray-600 hover:text-blue-600\">Features</a>\n <a href=\"#\" className=\"text-gray-600 hover:text-blue-600\">Pricing</a>\n </nav>\n <button className=\"bg-blue-600 text-white px-4 py-2 rounded-md text-sm font-medium\">\n Sign Up\n </button>\n </div>\n </header>\n );\n};\n\nexport default StickyHeader;\n```",
"metadata": {"category": "layout", "framework": "react", "complexity": "low"}
},
{
"instruction": "Create a Multi-column Blog Layout in React using Tailwind CSS. It should have a main content area and a sidebar for recent posts and categories.",
"input": "",
"output": "```tsx\nimport React from 'react';\n\nconst BlogLayout: React.FC = () => {\n return (\n <div className=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12\">\n <div className=\"grid grid-cols-1 lg:grid-cols-3 gap-12\">\n {/* Main Content */}\n <div className=\"lg:col-span-2 space-y-12\">\n <article className=\"space-y-4\">\n <h2 className=\"text-3xl font-bold text-gray-900\">The Future of Frontend Development</h2>\n <p className=\"text-gray-500\">Published on June 7, 2026 by Jane Doe</p>\n <div className=\"prose prose-lg text-gray-700\">\n <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...</p>\n <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat...</p>\n </div>\n </article>\n <article className=\"space-y-4\">\n <h2 className=\"text-3xl font-bold text-gray-900\">Mastering Tailwind CSS</h2>\n <p className=\"text-gray-500\">Published on June 5, 2026 by John Smith</p>\n <div className=\"prose prose-lg text-gray-700\">\n <p>Tailwind CSS is a utility-first CSS framework packed with classes like flex, pt-4, text-center and more...</p>\n </div>\n </article>\n </div>\n\n {/* Sidebar */}\n <aside className=\"space-y-12\">\n <div>\n <h3 className=\"text-lg font-bold text-gray-900 mb-4\">Recent Posts</h3>\n <ul className=\"space-y-4\">\n <li><a href=\"#\" className=\"text-blue-600 hover:underline\">Understanding React Hooks</a></li>\n <li><a href=\"#\" className=\"text-blue-600 hover:underline\">The Rise of Next.js</a></li>\n <li><a href=\"#\" className=\"text-blue-600 hover:underline\">CSS Grid vs Flexbox</a></li>\n </ul>\n </div>\n <div>\n <h3 className=\"text-lg font-bold text-gray-900 mb-4\">Categories</h3>\n <div className=\"flex flex-wrap gap-2\">\n {['React', 'Tailwind', 'JavaScript', 'TypeScript', 'CSS'].map(cat => (\n <span key={cat} className=\"px-3 py-1 bg-gray-100 text-gray-600 rounded-full text-sm cursor-pointer hover:bg-gray-200\">\n {cat}\n </span>\n ))}\n </div>\n </div>\n </aside>\n </div>\n </div>\n );\n};\n\nexport default BlogLayout;\n```",
"metadata": {"category": "layout", "framework": "react", "complexity": "medium"}
}\n]\n\nwith open(file_path, 'a') as f:\n for entry in data:\n f.write(json.dumps(entry) + '\\n')\n