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                &times;\\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')