import json
import os
file_path = os.path.expanduser('~/projects/web-dev-swarm/datasets/frontend/raw/frontend_gold_standard.jsonl')
# Each element is a dictionary
data = [
{
"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 = '', ...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 = '', ...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:\n for entry in data:\n f.write(json.dumps(entry) + '\\n')\n