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">
© {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')