import json
import os
file_path = os.path.expanduser('~/projects/web-dev-swarm/datasets/frontend/raw/frontend_gold_standard.jsonl')
# I will use a list of strings, where each string is a valid JSON line.
# This avoids Python's string escaping issues with the content.
json_lines = [
'{"instruction": "Create a reusable Button component in React using Tailwind CSS. It should support different variants: \'primary\', \'secondary\', and \'outline\', as well as different sizes: \'sm\', \'md\', and \'lg\'.", "input": "", "output": "```tsx\\nimport React from \'react\';\\n\\ntype ButtonVariant = \'primary\' | \'secondary\' | \'outline\';\\ntype ButtonSize = \'sm\' | \'md\' | \'lg\';\\n\\ninterface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\\n variant?: ButtonVariant;\\n size?: ButtonSize;\\n}\\n\\nconst Button: React.FC<ButtonProps> = ({ \\n variant = \'primary\\', \\n size = \'md\\', \\n className = \'\'\\n, ...props \\n}) => {\\n const baseStyles = \'inline-flex items-center justify-center rounded-md font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none';\\n \\n const variants = {\\n primary: \'bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500',\\n secondary: \'bg-gray-200 text-gray-900 hover:bg-gray-300 focus:ring-gray-500',\\n outline: \'border-2 border-blue-600 text-blue-600 hover:bg-blue-50 focus:ring-blue-500',\\n };\\n\\n const sizes = {\\n sm: \'px-3 py-1.5 text-sm',\\n md: \'px-4 py-2 text-base',\\n lg: \'px-6 py-3 text-lg',\\n };\\n\\n const variantClass = variants[variant];\\n const sizeClass = sizes[size];\\n\\n return (\\n <button \\n className={`${baseStyles} ${variantClass} ${sizeClass} ${className}`} \\n {...props} \\n />\\n );\\n};\\n\\nexport default Button;\\n```", "metadata": {"category": "component_gen", "framework": "react", "complexity": "low"}}',
'{"instruction": "Create a controlled Input component in React with Tailwind CSS. It should include a label, an optional error message, and support for different input types (text, email, password).", "input": "", "output": "```tsx\\nimport React from \'react\';\\n\\ninterface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {\\n label: string;\\n error?: string;\\n}\\n\\nconst Input: React.FC<InputProps> = ({ label, error, className = \'\'\\n, ...props }) => {\\n return (\\n <div className=\\"flex flex-col gap-1.5 w-full\\">\\n <label className=\\"text-sm font-medium text-gray-700\\">\\n {label}\\n </label>\\n <input\\n className={`px-3 py-2 border rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 sm:text-sm ${error ? \'border-red-500 focus:ring-red-500\' : \'border-gray-300 focus:border-blue-500\'} ${className}`}\\n {...props}\\n />\\n {error && <p className=\\"text-xs text-red-500\\">{error}</p>}\\n </div>\\n );\\n};\\n\\nexport default Input;\\n```", "metadata": {"category": "component_gen", "framework": "react", "complexity": "low"}}',
'{"instruction": "Create a Card component in React using Tailwind CSS. The card should display an image, a title, a description, and a \'Read More\' button.", "input": "", "output": "```tsx\\nimport React from \'react\';\\n\\ninterface CardProps {\\n image: string;\\n title: string;\\n description: string;\\n onReadMore?: () => void;\\n}\\n\\nconst Card: React.FC<CardProps> = ({ image, title, description, onReadMore }) => {\\n return (\\n <div className=\\"max-w-sm rounded overflow-hidden shadow-lg bg-white\\">\\n <img className=\\"w-full h-48 object-cover\\" src={image} alt={title} />\\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-700 text-base\\">\\n {description}\\n </p>\\n </div>\\n <div className=\\"px-6 pt-4 pb-6\\">\\n <button \\n onClick={onReadMore}\\n className=\\"bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded\\"\\n >\\n Read More\\n </button>\\n </div>\\n </div>\\n );\\n};\\n\\nexport default Card;\\n```", "metadata": {"category": "component_gen", "framework": "react", "complexity": "medium"}}',
'{"instruction": "Create a Badge component in React with Tailwind CSS that can accept different colors (success, warning, error, info) via props.", "input": "", "output": "```tsx\\nimport React from \'react\';\\n\\ntype BadgeColor = \'success\' | \'warning\' | \'error\' | \'info';\\n\\ninterface BadgeProps {\\n color: BadgeColor;\\n children: React.ReactNode;\\n}\\n\\nconst Badge: React.FC<BadgeProps> = ({ color, children }) => {\\n const colors = {\\n success: \'bg-green-100 text-green-800',\\n warning: \'bg-yellow-100 text-yellow-800',\\n error: \'bg-red-100 text-red-800',\\n info: \'bg-blue-100 text-blue-800',\\n };\\n\\n return (\\n <span className={`px-2.5 py-0.5 rounded-full text-xs font-medium ${colors[color]}`}>\\n {children}\\n </span\\n );\\n};\\n\\nexport default Badge;\\n```", "metadata": {"category": "component_gen", "framework": "react", "complexity": "low"}}',
'{"instruction": "Create a Modal component in React using Tailwind CSS. It should include a backdrop, a close button, and support for custom content.", "input": "", "output": "```tsx\\nimport React, { useEffect } from \'react\';\\n\\ninterface ModalProps {\\n isOpen: boolean;\\n onClose: () => void;\\n title: string;\\n children: React.ReactNode;\\n}\\n\\nconst Modal: React.FC<ModalProps> = ({ isOpen, onClose, title, children }) => {\\n useEffect(() => {\\n if (isOpen) {\\n document.body.style.overflow = \'hidden\';\\n } else {\\n document.body.style.overflow = \'unset\';\\n }\\n return () => { document.body.style.overflow = \'unset\'; };\\n }, [isOpen]);\\n\\n if (!isOpen) return null;\\n\\n return (\\n <div className=\\"fixed inset-0 z-50 flex items-center justify-center p-4\\">\\n <div \\n className=\\"fixed inset-0 bg-black bg-opacity-50 transition-opacity\\" \\n onClick={onClose} \\n />\\n <div className=\\"relative bg-white rounded-lg shadow-xl max-w-lg w-full p-6 z-10\\">\\n <div className=\\"flex justify-between items-center mb-4\\">\\n <h3 className=\\"text-lg font-semibold text-gray-900\\">{title}</h3>\\n <button \\n onClick={onClose} \\n className=\\"text-gray-400 hover:text-gray-600 transition-colors\\"\\n >\\n <svg className=\\"h-6 w-6\\" fill=\\"none\\" viewBox=\\"0 0 24 24\\" stroke=\\"currentColor\\">\\n <path strokeLinecap=\\"round\\" strokeLinejoin=\\"round\\" strokeWidth={2} d=\\"M6 18L18 6M6 6l12 12\\" />\\n </svg>\\n </button>\\n </div>\\n <div className=\\"mt-2\\">\\n {children}\\n </div>\\n </div>\\n </div>\\n );\\n};\\n\\nexport default Modal;\\n```", "metadata": {"category": "component_gen", "framework": "react", "complexity": "high"}}',
'{"instruction": "Create an Avatar component in React with Tailwind CSS. It should display an image if provided, otherwise fallback to the user\'s initials.", "input": "", "output": "```tsx\\nimport React from \'react\';\\n\\ninterface AvatarProps {\\n src?: string;\\n name: string;\\n size?: \'sm\' | \'md\' | \'lg\';\\n}\\n\\nconst Avatar: React.FC<AvatarProps> = ({ src, name, size = \'md\' }) => {\\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`}>\\n {src ? (\\n <img src={src} alt={name} className=\\"w-full h-full object-cover\\" />\\n ) : (\\n <span>{getInitials(name)}</span>\\n )}\\n </div>\\n );\\n};\\n\\nexport default Avatar;\\n```", "metadata": {"category": "component_gen", "framework": "react", "complexity": "medium"}}',
'{"instruction": "Create a custom Checkbox component in React using Tailwind CSS. It should be accessible and support a checked state.", "input": "", "output": "```tsx\\nimport React from \'react\';\\n\\ninterface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElement> {\\n label: string;\\n}\\n\\nconst Checkbox: React.FC<CheckboxProps> = ({ label, className = \'\'\\n, ...props }) => {\\n return (\\n <label className=\\"flex items-center gap-2 cursor-pointer select-none group\\">\\n <div className=\\"relative flex items-center\\">\\n <input\\n type=\\"checkbox\\"\\n className=\\"sr-only\\"\\n {...props}\\n />\\n <div className={`w-5 h-5 border-2 rounded transition-colors flex items-center justify-center ${props.checked ? \'bg-blue-600 border-blue-600\' : \'border-gray-300 group-hover:border-blue-400\'}`}>\\n {props.checked && (\\n <svg className=\\"w-3.5 h-3.5 text-white\\" fill=\\"none\\" viewBox=\\"0 0 24 24\\" stroke=\\"currentColor\\">\\n <path strokeLinecap=\\"round\\" strokeLinejoin=\\"round\\" strokeWidth={3} d=\\"M5 13l4 4L19 7\\" />\\n </svg>\\n )}\n </div>\\n </div>\\n <span className=\\"text-sm text-gray-700\\">{label}</span>\\n </label>\\n );\\n};\\n\\nexport default Checkbox;\\n```", "metadata": {"category": "component_gen", "framework": "react", "complexity": "low"}}',
'{"instruction": "Create an Accordion component in React using Tailwind CSS. It should allow multiple items to be expanded or only one at a time (controlled).", "input": "", "output": "```tsx\\nimport React, { useState } from \'react\';\\n\\ninterface AccordionItem {\\n title: string;\\n content: React.ReactNode;\\n}\\n\\ninterface AccordionProps {\\n items: AccordionItem[];\\n allowMultiple?: boolean;\\n}\\n\\nconst Accordion: React.FC<AccordionProps> = ({ items, allowMultiple = false }) => {\\n const [expandedIndices, setExpandedIndices] = useState<number[]>([]);\\n\\n const toggleItem = (index: number) => {\\n if (allowMultiple) {\\n setExpandedIndices(prev => \\n prev.includes(index) ? prev.filter(i => i !== index) : [...prev, index]\\n );\\n } else {\\n setExpandedIndices(prev => (prev.includes(index) ? [] : [index]));\\n }\\n };\\n\\n return (\\n <div className=\\"border border-gray-200 rounded-lg divide-y divide-gray-200\\">\\n {items.map((item, index) => (\\n <div key={index}>\\n <button\\n className=\\"w-full flex justify-between items-center px-4 py-3 text-left font-medium text-gray-700 hover:bg-gray-50 transition-colors\\"\\n onClick={() => toggleItem(index)}\\n >\\n {item.title}\\n <svg \\n className={`w-5 h-5 transition-transform ${expandedIndices.includes(index) ? \'rotate-180\' : \'\'}`}\\n fill=\\"none\\" viewBox=\\"0 0 24 24\\" stroke=\\"currentColor\\"\\n >\\n <path strokeLinecap=\\"round\\" strokeLinejoin=\\"round\\" strokeWidth={2} d=\\"M19 9l-7 7-7-7\\" />\\n </svg>\\n </button>\\n {expandedIndices.includes(index) && (\\n <div className=\\"px-4 py-3 text-gray-600 bg-gray-50\\">\\n {item.content}\\n </div>\\n )}\n </div>\\n ))}\\n </div>\\n );\\n};\\n\\nexport default Accordion;\\n```", "metadata": {"category": "component_gen", "framework": "react", "complexity": "medium"}}',
'{"instruction": "Create a Multi-select dropdown component in React using Tailwind CSS. It should allow users to select multiple options from a list.", "input": "", "output": "```tsx\\nimport React, { useState, useRef, useEffect } from \'react\';\\n\\ninterface Option {\\n value: string;\\n label: string;\\n}\\n\\ninterface MultiSelectProps {\\n options: Option[];\\n selected: string[];\\n onChange: (selected: string[]) => void;\\n placeholder?: string;\\n}\\n\\nconst MultiSelect: React.FC<MultiSelectProps> = ({ options, selected, onChange, placeholder = \'Select options...\' }) => {\\n const [isOpen, setIsOpen] = useState(false);\\n const containerRef = useRef<HTMLDivElement>(null);\\n\\n useEffect(() => {\\n const handleClickOutside = (event: MouseEvent) => {\\n if (containerRef.current && !containerRef.current.contains(event.target as Node)) {\\n setIsOpen(false);\\n }\\n };\\n document.addEventListener(\'mousedown\', handleClickOutside);\\n return () => document.removeEventListener(\'mousedown\', handleClickOutside);\\n }, []);\\n\\n const toggleOption = (value: string) => {\\n const newSelected = selected.includes(value)\\n ? selected.filter(v => v !== value)\\n : [...selected, value];\\n onChange(newSelected);\\n };\\n\\n return (\\n <div className=\\"relative w-full\\" ref={containerRef}>\\n <div \\n className=\\"min-h-[42px] p-1 flex flex-wrap gap-1 border rounded-md bg-white cursor-pointer items-center\\"\\n onClick={() => setIsOpen(!isOpen)}\\n >\\n {selected.length === 0 && <span className=\\"text-gray-400 px-2\\">{placeholder}</span>}\\n {selected.map(val => {\\n const option = options.find(o => o.value === val);\\n return (\\n <span key={val} className=\\"flex items-center gap-1 bg-blue-100 text-blue-700 px-2 py-0.5 rounded text-sm\\">\\n {option?.label}\\n <button \\n onClick={(e) => { e.stopPropagation(); toggleOption(val); }}\\n className=\\"hover:text-blue-900\\"\\n >\\n ×\\n </button>\\n </span\\n );\\n })}\\n </div>\\n {isOpen && (\\n <div className=\\"absolute z-10 w-full mt-1 bg-white border rounded-md shadow-lg max-h-60 overflow-auto\\">\\n {options.map(option => (\\n <div\\n key={option.value}\\n className=\\"px-4 py-2 hover:bg-blue-50 cursor-pointer flex items-center justify-between\\"\\n onClick={() => toggleOption(option.value)}\n >\\n <span className={selected.includes(option.value) ? \'font-bold text-blue-600\' : \'\'}>\\n {option.label}\\n </span>\\n {selected.includes(option.value) && (\\n <svg className=\\"w-4 h-4 text-blue-600\\" fill=\\"currentColor\\" viewBox=\\"0 0 20 20\\">\\n <path fillRule=\\"evenodd\\" d=\\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\\" clipRule=\\"evenodd\\" />\\n </svg>\\n )}\n </div>\\n ))}\\n </div>\\n )}\n </div>\\n );\\n};\\n\\nexport default MultiSelect;\\n```", "metadata": {"category": "component_gen", "framework": "react", "complexity": "high"}}',
'{"instruction": "Create a Progress Bar component in React using Tailwind CSS. It should accept a percentage value and show a label.", "input": "", "output": "```tsx\\nimport React from \'react\';\\n\\ninterface ProgressBarProps {\\n progress: number;\\n label?: string;\\n color?: string;\\n}\\n\\nconst ProgressBar: React.FC<ProgressBarProps> = ({ progress, label, color = \'bg-blue-600\' }) => {\\n const clampedProgress = Math.min(Math.max(progress, 0), 100);\\n\\n return (\\n <div className=\\"w-full\\">\\n {label && <div className=\\"flex justify-between mb-1 text-sm font-medium text-gray-700\\">\\n <span>{label}</span>\\n <span>{clampedProgress}%</span>\\n </div>}\\n <div className=\\"w-full bg-gray-200 rounded-full h-2.5\\">\\n <div \\n className={`${color} h-2.5 rounded-full transition-all duration-300 ease-out`} \\n style={{ width: `${clampedProgress}%` }}\\n />\\n </div>\\n </div>\\n );\\n};\\n\\nexport default ProgressBar;\\n```", "metadata": {"category": "component_gen", "framework": "react", "complexity": "medium"}}'
]
with open(file_path, 'a') as f:
for line in json_lines:
f.write(line + '\\n')