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
import React, { useState } from 'react';

const Navbar: React.FC = () => {
  const [isOpen, setIsOpen] = useState(false);

  const navLinks = [
    { name: 'Home', href: '#' },
    { name: 'About', href: '#' },
    { name: 'Services', href: '#' },
  ];

  return (
    <nav className="bg-white shadow-md">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex justify-between h-16 items-center">
          <div className="flex-shrink-0 flex items-center">
            <span className="text-xl font-bold text-blue-600">Logo</span >
          </div >
          <div className="hidden md:flex space-x-8">
            {navLinks.map((link) => (
              <a key={link.name} href={link.href} className="text-gray-600 hover:text-blue-600 transition-colors">
                {link.name}
              </a>
            ))}
          </div >
        </div >
      </div >

      {/* Mobile Menu */}
      <div className={`${isOpen ? 'block' : 'hidden'} md:hidden bg-white border-t border-gray-200`}>
        <div className="px-2 pt-2 pb-3 space-y-1">
          {navLinks.map((link) => (
            <a
              key={link.name}
              href={link.href}
              className="block px-3 py-2 text-base font-medium text-gray-600 hover:text-blue-600 hover:bg-gray-50 rounded-md"
            >
              {link.name}
            </a>
          ))}
        </div >
      </div >
    </nav>
  );
};

export default Navbar;
```""",
        "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
import React, { useState } from 'react';

interface SidebarProps {
  items: { name: string; icon: React.ReactNode; href: string }[];
}

const Sidebar: React.FC<SidebarProps> = ({ items }) => {
  const [isCollapsed, setIsCollapsed] = useState(false);

  return (
    <div className={`h-screen bg-gray-900 text-white transition-all duration-300 ${isCollapsed ? 'w-20' : 'w-64'} flex flex-col`}>
      <div className="p-4 flex items-center justify-between">
        {!isCollapsed && <span className="font-bold text-xl">Dashboard</span >}
        <button 
          onClick={() => setIsCollapsed(!isCollapsed)}
          className="p-2 rounded-md hover:bg-gray-800 transition-colors"
        >
          <svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
          </svg>
        </button>
      </div >
      <nav className="flex-1 px-2 py-4 space-y-2">
        {items.map((item) => (
          <a
            key={item.name}
            href={item.href}
            className="flex items-center p-3 rounded-lg hover:bg-gray-800 transition-colors group"
          >
            <span className="text-gray-400 group-hover:text-white">{item.icon}</span >
            {!isCollapsed && <span className="ml-4">{item.name}</span >}
          </a>
        ))}
      </nav>
    </div >
  );
};

export default Sidebar;
```""",
        "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
import React from 'react';

interface GridProps {
  items: React.ReactNode[];
}

const GridLayout: React.FC<GridProps> = ({ items }) => {
  return (
    <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6 p-6">
      {items.map((item, index) => (
        <div key={index} className="bg-white p-4 rounded-lg shadow-md">
          {item}
        </div >
      ))}
    </div >
  );
};

export default GridLayout;
```""",
        "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
import React from 'react';

const Hero: React.FC = () => {
  return (
    <div className="relative h-[500px] flex items-center justify-center text-center text-white">
      <div 
        className="absolute inset-0 bg-cover bg-center z-0"
        style={{ backgroundImage: 'url("https://images.unsplash.com/photo-1497215728101-856f4ea42174?auto=format&fit=crop&w=1600&q=80")' }}
      />
      <div className="absolute inset-0 bg-black bg-opacity-50 z-10" />
      <div className="relative z-20 max-w-3xl px-4">
        <h1 className="text-4xl md:text-6xl font-bold mb-4">Build Something Amazing</h1 >
        <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>
        <button className="bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-full text-lg font-semibold transition-colors">
          Get Started
        </button>
      </div >
    </div >
  );
};

export default Hero;
```""",
        "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
import React from 'react';

const Footer: React.FC = () => {
  return (
    <footer className="bg-gray-900 text-gray-300 py-12">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
          <div className="col-span-1 md:col-span-1">
            <span className="text-2xl font-bold text-white">Logo</span >
            <p className="mt-4 text-sm text-gray-400">Making the web a better place, one component at a time.</p>
          </div >
          <div >
            <h3 className="text-sm font-semibold text-white uppercase tracking-wider">Solutions</h3 >
            <ul className="mt-4 space-y-2">
              <li><a href="#" className="hover:text-white">Marketing</a></li >
              <li><a href="#" className="hover:text-white">Analytics</a></li >
              <li><a href="#" className="hover:text-white">Commerce</a></li >
            </ul >
          </div >
          <div >
            <h3 className="text-sm font-semibold text-white uppercase tracking-wider">Support</h3 >
            <ul className="mt-4 space-y-2">
              <li><a href="#" className="hover:text-white">Pricing</a></li >
              <li><a href="#" className="hover:text-white">Documentation</a></li >
              <li><a href="#" className="hover:text-white">Guides</a></li >
            </ul >
          </div >
          <div >
            <h3 className="text-sm font-semibold text-white uppercase tracking-wider">Company</h3 >
            <ul className="mt-4 space-y-2">
              <li><a href="#" className="hover:text-white">About</a></li >
              <li><a href="#" className="hover:text-white">Blog</a></li >
              <li><a href="#" className="hover:text-white">Jobs</a></li >
            </ul >
          </div >
        </div >
        <div className="mt-12 pt-8 border-t border-gray-800 text-center text-sm text-gray-500">
          &copy; {new Date().getFullYear()} Your Company, Inc. All rights reserved.
        </div >
      </div >
    </footer >
  );
};

export default Footer;
```""",
        "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
import React from 'react';

const DashboardLayout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  return (
    <div className="flex h-screen bg-gray-100 overflow-hidden">
      {/* Sidebar */}
      <aside className="w-64 bg-gray-900 text-white hidden md:flex flex-col">
        <div className="p-6 text-2xl font-bold">Admin</div >
        <nav className="flex-1 px-4 space-y-2">
          <a href="#" className="block p-3 rounded bg-gray-800">Dashboard</a >
          <a href="#" className="block p-3 rounded hover:bg-gray-800">Users</a >
          <a href="#" className="block p-3 rounded hover:bg-gray-800">Settings</a >
        </nav>
      </aside >

      {/* Main Content */}
      <div className="flex-1 flex flex-col overflow-hidden">
        <header className="h-16 bg-white shadow-sm flex items-center justify-between px-8">
          <h2 className="text-xl font-semibold text-gray-800">Overview</h2 >
          <div className="flex items-center gap-4">
            <div className="w-8 h-8 rounded-full bg-blue-500"></div>
            <span className="text-sm font-medium text-gray-700">John Doe</span >
          </div >
        </header >
        <main className="flex-1 overflow-y-auto p-8">
          {children}
        </main>
      </div >
    </div >
  );
};

export default DashboardLayout;
```""",
        "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
import React from 'react';

interface CardProps {
  title: string;
  content: string;
}

const CardGrid: React.FC<{ cards: CardProps[] }> = ({ cards }) => {
  return (
    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 p-4">
      {cards.map((card, index) => (
        <div key={index} className="bg-white rounded-xl shadow-lg p-6 border border-gray-100">
          <h3 className="text-lg font-bold text-gray-900 mb-2">{card.title}</h3 >
          <p className="text-gray-600">{card.content}</p>
        </div >
      ))}
    </div >
  );
};

export default CardGrid;
```""",
        "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
import React from 'react';

const SplitScreen: React.FC = () => {
  return (
    <div className="flex flex-col md:flex-row h-screen">
      <div className="md:w-1/2 h-64 md:h-full">
        <img 
          src="https://images.unsplash.com/photo-1497366216548-37526070297c?auto=format&fit=crop&w=800&q=80" 
          alt="Office" 
          className="w-full h-full object-cover"
        />
      </div >
      <div className="md:w-1/2 h-full flex items-center justify-center p-12 bg-gray-50">
        <div className="max-w-md">
          <h2 className="text-4xl font-bold text-gray-900 mb-6">Modern Workspace</h2 >
          <p className="text-lg text-gray-600 mb-8">
            Experience the next generation of productivity with our beautifully designed workspace solutions.
          </p>
          <button className="bg-blue-600 text-white px-6 py-3 rounded-lg font-semibold hover:bg-blue-700 transition-colors">
            Learn More
          </button>
        </div >
      </div >
    </div >
  );
};

export default SplitScreen;
```""",
        "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
import React from 'react';

const StickyHeader: React.FC = () => {
  return (
    <header className="sticky top-0 z-50 w-full bg-white/80 backdrop-blur-md border-b border-gray-200">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
        <div className="text-xl font-bold text-blue-600">StickyBrand</div >
        <nav className="hidden md:flex space-x-6">
          <a href="#" className="text-gray-600 hover:text-blue-600">Home</a >
          <a href="#" className="text-gray-600 hover:text-blue-600">Features</a >
          <a href="#" className="text-gray-600 hover:text-blue-600">Pricing</a >
        </nav >
        <button className="bg-blue-600 text-white px-4 py-2 rounded-md text-sm font-medium">
          Sign Up
        </button>
      </div >
    </header >
  );
};

export default StickyHeader;
```""",
        "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
import React from 'react';

const BlogLayout: React.FC = () => {
  return (
    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-12">
        {/* Main Content */}
        <div className="lg:col-span-2 space-y-12">
          <article className="space-y-4">
            <h2 className="text-3xl font-bold text-gray-900">The Future of Frontend Development</h2 >
            <p className="text-gray-500">Published on June 7, 2026 by Jane Doe</p>
            <div className="prose prose-lg text-gray-700">
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...</p>
              <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat...</p>
            </div >
          </article>
          <article className="space-y-4">
            <h2 className="text-3xl font-bold text-gray-900">Mastering Tailwind CSS</h2 >
            <p className="text-gray-500">Published on June 5, 2026 by John Smith</p>
            <div className="prose prose-lg text-gray-700">
              <p>Tailwind CSS is a utility-first CSS framework packed with classes like flex, pt-4, text-center and more...</p>
            </div >
          </article>
        </div >

        {/* Sidebar */}
        <aside className="space-y-12">
          <div >
            <h3 className="text-lg font-bold text-gray-900 mb-4">Recent Posts</h3 >
            <ul className="space-y-4">
              <li><a href="#" className="text-blue-600 hover:underline">Understanding React Hooks</a></li >
              <li><a href="#" className="text-blue-600 hover:underline">The Rise of Next.js</a></li >
              <li><a href="#" className="text-blue-600 hover:underline">CSS Grid vs Flexbox</a></li >
            </ul >
          </div >
          <div >
            <h3 className="text-lg font-bold text-gray-900 mb-4">Categories</h3 >
            <div className="flex flex-wrap gap-2">
              {['React', 'Tailwind', 'JavaScript', 'TypeScript', 'CSS'].map(cat => (
                <span key={cat} className="px-3 py-1 bg-gray-100 text-gray-600 rounded-full text-sm cursor-pointer hover:bg-gray-200">
                  {cat}
                </span >
              ))}
            </div >
          </div >
        </aside >
      </div >
    </div >
  );
};

export default BlogLayout;
```""",
        "metadata": {"category": "layout", "framework": "react", "complexity": "medium"}
    }
]

with open(file_path, 'a') as f:
    for entry in data:
        f.write(json.dumps(entry) + '\\n')