import json
pairs = [
{
"instruction": "Create a reusable Button component using React and Tailwind CSS. It should support different variants (primary, secondary, outline, ghost) and sizes (sm, md, lg).",
"input": "",
"output": """import React from 'react';
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
variant?: 'primary' | 'secondary' | 'outline' | 'ghost';
size?: 'sm' | 'md' | 'lg';
}
const Button: React.FC<ButtonProps> = ({
children,
variant = 'primary',
size = 'md',
className = '',
...props
}) => {
const baseStyles = 'inline-flex items-center justify-center font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none';
const variants = {
primary: 'bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500',
secondary: 'bg-gray-600 text-white hover:bg-gray-700 focus:ring-gray-500',
outline: 'border-2 border-blue-600 text-blue-600 hover:bg-blue-50 focus:ring-blue-500',
ghost: 'bg-transparent text-gray-600 hover:bg-gray-100 focus:ring-gray-500',
};
const sizes = {
sm: 'px-3 py-1.5 text-sm',
md: 'px-4 py-2 text-base',
lg: 'px-6 py-3 text-lg',
};
const variantClass = variants[variant];
const sizeClass = sizes[size];
return (
<button
className={`${baseStyles} ${variantClass} ${sizeClass} ${className}`}
{...props}
>
{children}
</button>
);
};
export default Button;""",
"metadata": {"category": "component_gen", "framework": "react", "complexity": "low"}
},
{
"instruction": "Generate a simple Badge component in React with Tailwind CSS. It should accept a label and a color variant (success, warning, error, info).",
"input": "",
"output": """import React from 'react';
interface BadgeProps {
label: string;
variant?: 'success' | 'warning' | 'error' | 'info';
className?: string;
}
const Badge: React.FC<BadgeProps> = ({ label, variant = 'info', className = '' }) => {
const variants = {
success: 'bg-green-100 text-green-800',
warning: 'bg-yellow-100 text-yellow-800',
error: 'bg-red-100 text-red-800',
info: 'bg-blue-100 text-blue-800',
};
return (
<span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${variants[variant]} ${className}`}>
{label}
</span>
);
};
export default Badge;""",
"metadata": {"category": "component_gen", "framework": "react", "complexity": "low"}
},
{
"instruction": "Develop a React Avatar component using Tailwind CSS. It should support an image URL or fallback to initials if the image fails to load.",
"input": "",
"output": """import React, { useState } from 'react';
interface AvatarProps {
src?: string;
alt?: string;
initials?: string;
size?: 'sm' | 'md' | 'lg';
className?: string;
}
const Avatar: React.FC<AvatarProps> = ({ src, alt, initials, size = 'md', className = '' }) => {
const [imgError, setImgError] = useState(false);
const sizeClasses = {
sm: 'w-8 h-8 text-xs',
md: 'w-12 h-12 text-base',
lg: 'w-16 h-16 text-xl',
};
const baseClasses = `rounded-full flex items-center justify-center overflow-hidden bg-gray-200 ${sizeClasses[size]} ${className}`;
if (!imgError && src) {
return (
<div className={baseClasses}>
<img
src={src}
alt={alt || 'Avatar'}
className="w-full h-full object-cover"
onError={() => setImgError(true)}
/>
</div>
);
}
return (
<div className={baseClasses}>
<span className="text-gray-600 font-medium">{initials || '??'}</span>
</div>
);
};
export default Avatar;""",
"metadata": {"category": "component_gen", "framework": "react", "complexity": "low"}
},
{
"instruction": "Create a robust Input component in React using Tailwind CSS. It should support labels, error messages, placeholder text, and an optional icon on the left or right.",
"input": "",
"output": """import React from 'react';
interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
label?: string;
error?: string;
icon?: React.ReactNode;
iconPosition?: 'left' | 'right';
}
const Input: React.FC<InputProps> = ({
label,
error,
icon,
iconPosition = 'left',
className = '',
...props
}) => {
return (
<div className="w-full">
{label && (
<label className="block text-sm font-medium text-gray-700 mb-1">
{label}
</label>
)}
<div className={`relative ${iconPosition === 'right' ? 'pr-10' : iconPosition === 'left' ? 'pl-10' : ''}`}>
{icon && iconPosition === 'left' && (
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-gray-400">
{icon}
</div>
)}
<input
className={`block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm ${
error ? 'border-red-500 focus:border-red-500 focus:ring-red-500' : 'border-gray-300'
} ${className}`}
{...props}
/>
{icon && iconPosition === 'right' && (
<div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none text-gray-400">
{icon}
</div>
)}
</div>
{error && <p className="mt-1 text-sm text-red-600">{error}</p>}
</div>
);
};
export default Input;""",
"metadata": {"category": "component_gen", "framework": "react", "complexity": "medium"}
},
{
"instruction": "Develop a Card component using React and Tailwind CSS. The component should have sections for a header, body, and footer, and support a shadow effect and rounded corners.",
"input": "",
"output": """import React from 'react';
interface CardProps {
title?: string;
subtitle?: string;
children: React.ReactNode;
footer?: React.ReactNode;
className?: string;
}
const Card: React.FC<CardProps> = ({ title, subtitle, children, footer, className = '' }) => {
return (
<div className={`bg-white rounded-lg shadow-md overflow-hidden ${className}`}>
{(title || subtitle) && (
<div className="px-6 py-4 border-b border-gray-200">
{title && <h3 className="text-lg font-semibold text-gray-900">{title}</h3>}
{subtitle && <p className="text-sm text-gray-500 mt-1">{subtitle}</p>}
</div>
)}
<div className="px-6 py-4">
{children}
</div>
{footer && (
<div className="px-6 py-4 bg-gray-50 border-t border-gray-200">
{footer}
</div>
)}
</div>
);
};
export default Card;""",
"metadata": {"category": "component_gen", "framework": "react", "complexity": "medium"}
},
{
"instruction": "Create a Modal component in React using Tailwind CSS. It should include an overlay, a close button, and be able to render any content passed as children. Use a portal for rendering.",
"input": "",
"output": """import React, { useEffect } from 'react';
import { createPortal } from 'react-dom';
interface ModalProps {
isOpen: boolean;
onClose: () => void;
title?: string;
children: React.ReactNode;
}
const Modal: React.FC<ModalProps> = ({ isOpen, onClose, title, children }) => {
useEffect(() => {
if (isOpen) {
document.body.style.overflow = 'hidden';
} else {
document.body.style.overflow = 'unset';
}
return () => {
document.body.style.overflow = 'unset';
};
}, [isOpen]);
if (!isOpen) return null;
return createPortal(
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 sm:p-0">
<div
className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"
onClick={onClose}
/>
<div className="relative bg-white rounded-lg shadow-xl transform transition-all sm:my-8 sm:w-full sm:max-w-lg overflow-hidden">
<div className="px-6 py-4 border-b border-gray-200 flex items-center justify-between">
<h3 className="text-lg font-medium text-gray-900">{title}</h3>
<button
onClick={onClose}
className="text-gray-400 hover:text-gray-500 focus:outline-none"
>
<span className="sr-only">Close</span>
<svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<div className="px-6 py-4">
{children}
</div>
</div>
</div>,
document.body
);
};
export default Modal;""",
"metadata": {"category": "component_gen", "framework": "react", "complexity": "medium"}
},
{
"instruction": "Build a custom Checkbox component in React with Tailwind CSS. It should be accessible (using ARIA attributes) and support an indeterminate state.",
"input": "",
"output": """import React from 'react';
interface CheckboxProps {
checked: boolean;
indeterminate?: boolean;
onChange: (checked: boolean) => void;
label?: string;
id: string;
className?: string;
}
const Checkbox: React.FC<CheckboxProps> = ({ checked, indeterminate, onChange, label, id, className = '' }) => {
return (
<div className={`flex items-center ${className}`}>
<div className="flex items-center h-5">
<input
id={id}
type="checkbox"
className="sr-only"
checked={checked}
onChange={(e) => onChange(e.target.checked)}
aria-checked={indeterminate ? 'mixed' : checked ? 'true' : 'false'}
/>
<label
htmlFor={id}
className={`
relative w-5 h-5 rounded border cursor-pointer transition-colors
${checked ? 'bg-blue-600 border-blue-600' : 'bg-white border-gray-300'}
${indeterminate ? 'bg-blue-600 border-blue-600' : ''}
`}
>
{checked && !indeterminate && (
<svg className="w-full h-full text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
</svg>
)}
{indeterminate && (
<svg className="w-full h-full text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 8h14" />
</svg>
)}
</label>
</div>
{label && (
<label htmlFor={id} className="ml-3 text-sm font-medium text-gray-700 cursor-pointer">
{label}
</label>
)}
</div>
);
};
export default Checkbox;""",
"metadata": {"category": "component_gen", "framework": "react", "complexity": "medium"}
},
{
"instruction": "Create a highly reusable Data Table component in React using Tailwind CSS. It should support sorting, pagination, and custom cell rendering via render props.",
"input": "",
"output": """import React, { useState } from 'react';
interface Column<T> {
header: string;
accessor: keyof T;
render?: (item: T) => React.ReactNode;
}
interface DataTableProps<T> {
data: T[];
columns: Column<T>[];
pageSize?: number;
}
const DataTable = <T extends { id: string | number }>({
data,
columns,
pageSize = 5,
}: DataTableProps<T>) => {
const [sortConfig, setSortConfig] = useState<{ key: keyof T; direction: 'asc' | 'desc' } | null>(null);
const [currentPage, setCurrentPage] = useState(1);
const sortedData = [...data].sort((a, b) => {
if (!sortConfig) return 0;
const { key, direction } = sortConfig;
if (a[key] < b[key]) return direction === 'asc' ? -1 : 1;
if (a[key] > b[key]) return direction === 'asc' ? 1 : -1;
return 0;
});
const handleSort = (key: keyof T) => {
let direction: 'asc' | 'desc' = 'asc';
if (sortConfig && sortConfig.key === key && sortConfig.direction === 'asc') {
direction = 'desc';
}
setSortConfig({ key, direction });
};
const totalPages = Math.ceil(sortedData.length / pageSize);
const paginatedData = sortedData.slice((currentPage - 1) * pageSize, currentPage * pageSize);
return (
<div className="overflow-x-auto">
<table className="min-w-full divide-y divide-gray-200">
<thead className="bg-gray-50">
<tr>
{columns.map((col) => (
<th
key={String(col.accessor)}
onClick={() => handleSort(col.accessor)}
className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:bg-gray-100"
>
{col.header}
{sortConfig?.key === col.accessor && (sortConfig.direction === 'asc' ? ' ↑' : ' ↓')}
</th>
))}
</tr>
</thead>
<tbody className="bg-white divide-y divide-gray-200">
{paginatedData.map((item) => (
<tr key={item.id}>
{columns.map((col) => (
<td key={String(col.accessor)} className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
{col.render ? col.render(item) : (item[col.accessor] as React.ReactNode)}
</td>
))}
</tr>
))}
</tbody>
</table>
<div className="flex items-center justify-between px-4 py-3 bg-white border-t border-gray-200 sm:px-6">
<div className="flex flex-1 justify-between sm:hidden">
<button
onClick={() => setCurrentPage(p => Math.max(1, p - 1))}
disabled={currentPage === 1}
className="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 disabled:opacity-50"
>
Previous
</button>
<button
onClick={() => setCurrentPage(p => Math.min(totalPages, p + 1))}
disabled={currentPage === totalPages}
className="relative ml-3 inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 disabled:opacity-50"
>
Next
</button>
</div>
<div className="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
<div>
<p className="text-sm text-gray-700">
Showing <span className="font-medium">{(currentPage - 1) * pageSize + 1}</span> to{' '}
<span className="font-medium">{Math.min(currentPage * pageSize, sortedData.length)}</span> of{' '}
<span className="font-medium">{sortedData.length}</span> results
</p>
</div>
<div>
<nav className="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
<button
onClick={() => setCurrentPage(p => Math.max(1, p - 1))}
disabled={currentPage === 1}
className="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 disabled:opacity-50"
>
Previous
</button>
{[...Array(totalPages)].map((_, i) => (
<button
key={i + 1}
onClick={() => setCurrentPage(i + 1)}
className={`relative inline-flex items-center px-4 py-2 border text-sm font-medium ${
currentPage === i + 1
? 'z-10 bg-blue-50 border-blue-500 text-blue-600'
: 'bg-white border-gray-300 text-gray-500 hover:bg-gray-50'
}`}
>
{i + 1}
</button>
))}
<button
onClick={() => setCurrentPage(p => Math.min(totalPages, p + 1))}
disabled={currentPage === totalPages}
className="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 disabled:opacity-50"
>
Next
</button>
</nav>
</div>
</div>
</div>
</div>
);
};
export default DataTable;""",
"metadata": {"category": "component_gen", "framework": "react", "complexity": "high"}
},
{
"instruction": "Develop a Multi-Select Dropdown component in React using Tailwind CSS. It should allow users to select multiple options from a list, display selected items as tags, and include a search filter.",
"input": "",
"output": """import React, { useState, useRef, useEffect } from 'react';
interface Option {
value: string;
label: string;
}
interface MultiSelectProps {
options: Option[];
selected: string[];
onChange: (selected: string[]) => void;
placeholder?: string;
className?: string;
}
const MultiSelect: React.FC<MultiSelectProps> = ({ options, selected, onChange, placeholder = 'Select options...', className = '' }) => {
const [isOpen, setIsOpen] = useState(false);
const [searchTerm, setSearchTerm] = useState('');
const containerRef = useRef<HTMLDivElement>(null);
useEffect(() => {
const handleClickOutside = (event: MouseEvent) => {
if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
setIsOpen(false);
}
};
document.addEventListener('mousedown', handleClickOutside);
return () => document.removeEventListener('mousedown', handleClickOutside);
}, []);
const filteredOptions = options.filter(option =>
option.label.toLowerCase().includes(searchTerm.toLowerCase())
);
const toggleOption = (value: string) => {
const newSelected = selected.includes(value)
? selected.filter(item => item !== value)
: [...selected, value];
onChange(newSelected);
};
const removeOption = (e: React.MouseEvent, value: string) => {
e.stopPropagation();
onChange(selected.filter(item => item !== value));
};
return (
<div className={`relative ${className}`} ref={containerRef}>
<div
onClick={() => setIsOpen(!isOpen)}
className="min-h-[42px] w-full flex flex-wrap items-center gap-2 px-3 py-2 border border-gray-300 rounded-md bg-white cursor-pointer focus-within:ring-2 focus-within:ring-blue-500 focus-within:border-blue-500"
>
{selected.length > 0 ? (
selected.map(val => {
const option = options.find(o => o.value === val);
return (
<span key={val} className="flex items-center bg-blue-100 text-blue-800 text-xs font-medium px-2 py-0.5 rounded-full">
{option?.label}
<button
onClick={(e) => removeOption(e, val)}
className="ml-1 hover:text-blue-900"
>
×
</button>
</span>
);
})
) : (
<span className="text-gray-400 text-sm">{placeholder}</span>
)}
</div>
{isOpen && (
<div className="absolute z-10 mt-1 w-full bg-white border border-gray-300 rounded-md shadow-lg max-h-60 overflow-auto">
<div className="sticky top-0 bg-white p-2 border-b border-gray-200">
<input
type="text"
className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-blue-500"
placeholder="Search..."
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
onClick={(e) => e.stopPropagation()}
/>
</div>
{filteredOptions.length > 0 ? (
filteredOptions.map(option => (
<div
key={option.value}
onClick={() => toggleOption(option.value)}
className={`px-3 py-2 text-sm cursor-pointer hover:bg-blue-50 ${
selected.includes(option.value) ? 'bg-blue-50 text-blue-700 font-medium' : 'text-gray-900'
}`}
>
{option.label}
</div>
))
) : (
<div className="px-3 py-2 text-sm text-gray-500">No options found</div>
)}
</div>
)}
</div>
);
};
export default MultiSelect;""",
"metadata": {"category": "component_gen", "framework": "react", "complexity": "high"}
},
{
"instruction": "Refactor the following basic Button component to support different variants (primary, secondary, outline) and sizes (sm, md, lg) using Tailwind CSS.",
"input": "const Button = ({ children, onClick }) => <button onClick={onClick} className=\"bg-blue-500 text-white px-4 py-2 rounded\">{children}</button>;",
"output": """import React from 'react';
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
variant?: 'primary' | 'secondary' | 'outline';
size?: 'sm' | 'md' | 'lg';
}
const Button: React.FC<ButtonProps> = ({
children,
variant = 'primary',
size = 'md',
className = '',
...props
}) => {
const baseStyles = 'inline-flex items-center justify-center font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none';
const variants = {
primary: 'bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500',
secondary: 'bg-gray-600 text-white hover:bg-gray-700 focus:ring-gray-500',
outline: 'border-2 border-blue-600 text-blue-600 hover:bg-blue-50 focus:ring-blue-500',
};
const sizes = {
sm: 'px-3 py-1.5 text-sm',
md: 'px-4 py-2 text-base',
lg: 'px-6 py-3 text-lg',
};
return (
<button
className={`${baseStyles} ${variants[variant]} ${sizes[size]} ${className}`}
{...props}
>
{children}
</button>
);
};
export default Button;""",
"metadata": {"category": "component_gen", "framework": "react", "complexity": "medium"}
}
]
with open('/home/vincent/projects/web-dev-swarm/datasets/frontend/raw/frontend_gold_standard.jsonl', 'w') as f:
for pair in pairs:
f.write(json.dumps(pair) + '\\n')