import json
import os
data = [
{
"instruction": "Create a reusable `LoadingButton` component in React using Tailwind CSS. The button should accept a `loading` prop (boolean) and an `onClick` handler. When `loading` is true, the button should show a spinner and be disabled. Use a standard SVG spinner.",
"input": "",
"output": "import React from 'react';\n\nconst LoadingButton = ({ onClick, loading, children, className = '' }) => {\n return (\n <button\n onClick={!loading ? onClick : undefined}\n disabled={loading}\n className={`inline-flex items-center justify-center px-4 py-2 font-semibold text-white bg-blue-600 rounded-md opacity-70 disabled:opacity-50 disabled:cursor-not-allowed transition-all ${className}`}\n >\n {loading ? (\n <>\n <svg className=\"animate-spin -ml-1 mr-3 h-5 w-5 text-white\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n <circle className=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" strokeWidth=\"4\"></circle>\n <path className=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n </svg>\n Loading...\n </>\n ) : (\n children\n )}\n </button>\n );\n};\n\nexport default LoadingButton;",
"metadata": {"category": "state_ui", "framework": "react", "complexity": "low"}
},
{
"instruction": "Implement an `EmptyStateList` component that takes an `items` array. If the array is empty, display a friendly empty state message with an icon using Tailwind CSS. If items exist, render them in a simple list.",
"input": "",
"output": "import React from 'react';\n\nconst EmptyStateList = ({ items }) => {\n if (!items || items.length === 0) {\n return (\n <div className=\"flex flex-col items-center justify-center p-8 text-center bg-gray-50 rounded-lg border-2 border-dashed border-gray-300\">\n <svg className=\"w-16 h-16 text-gray-400 mb-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth=\"2\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01\"></path>\n </svg>\n <h3 className=\"text-lg font-medium text-gray-900\">No items found</h3>\n <p className=\"mt-1 text-sm text-gray-500\">Get started by adding some new items to your list.</p>\n </div>\n );\n }\n\n return (\n <ul className=\"divide-y divide-gray-200 bg-white shadow sm:rounded-md\">\n {items.map((item, index) => (\n <li key={index} className=\"px-6 py-4 hover:bg-gray-50 transition-colors\">\n <p className=\"text-sm font-medium text-blue-600 truncate\">{item}</p>\n </li>\n ))}\n </ul>\n );\n};\n\nexport default EmptyStateList;",
"metadata": {"category": "state_ui", "framework": "react", "complexity": "low"}
},
{
"instruction": "Modify the provided `LoginForm` component to handle error states. If an `error` prop is passed, display a red error alert box above the form fields. Use Tailwind CSS for styling.",
"input": "import React from 'react';\n\nconst LoginForm = ({ onSubmit }) => {\n return (\n <form onSubmit={onSubmit} className=\"space-y-4 p-4 border rounded shadow\">\n <div>\n <label className=\"block text-sm font-medium\">Email</label>\n <input type=\"email\" className=\"w-full border rounded p-2\" />\n </div>\n <div>\n <label className=\"block text-sm font-medium\">Password</label>\n <input type=\"password\" className=\"w-full border rounded p-2\" />\n </div>\n <button type=\"submit\" className=\"w-full bg-blue-500 text-white py-2 rounded\">\n Login\n </button>\n </form>\n );\n};\n\nexport default LoginForm;",
"output": "import React from 'react';\n\nconst LoginForm = ({ onSubmit, error }) => {\n return (\n <form onSubmit={onSubmit} className=\"space-y-4 p-4 border rounded shadow\">\n {error && (\n <div className=\"bg-red-50 border-l-4 border-red-400 p-4 mb-4\">\n <div className=\"flex\">\n <div className=\"flex-shrink-0\">\n <svg className=\"h-5 w-5 text-red-400\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n <path fillRule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z\" clipRule=\"evenodd\" />\n </svg>\n </div>\n <div className=\"ml-3\">\n <p className=\"text-sm text-red-700\">{error}</p>\n </div>\n </div>\n </div>\n )}\n <div>\n <label className=\"block text-sm font-medium text-gray-700\">Email</label>\n <input type=\"email\" className=\"mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2 focus:ring-blue-500 focus:border-blue-500\" />\n </div>\n <div>\n <label className=\"block text-sm font-medium text-gray-700\">Password</label>\n <input type=\"password\" className=\"mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2 focus:ring-blue-500 focus:border-blue-500\" />\n </div>\n <button type=\"submit\" className=\"w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors\">\n Login\n </button>\n </form>\n );\n};\n\nexport default LoginForm;",
"metadata": {"category": "state_ui", "framework": "react", "complexity": "medium"}
},
{
"instruction": "Create a `SuccessNotification` component that appears when a `show` prop is true. It should display a success message and an icon, then automatically hide after 3 seconds using `useEffect`. Use Tailwind CSS for a sleek design.",
"input": "",
"output": "import React, { useEffect } from 'react';\n\nconst SuccessNotification = ({ show, message, onClose }) => {\n useEffect(() => {\n if (show) {\n const timer = setTimeout(() => {\n onClose();\n }, 3000);\n return () => clearTimeout(timer);\n }\n }, [show, onClose]);\n\n if (!show) return null;\n\n return (\n <div className=\"fixed bottom-5 right-5 flex items-center p-4 mb-4 text-green-800 rounded-lg bg-green-50 shadow-lg border border-green-200\" role=\"alert\">\n <svg className=\"flex-shrink-0 w-5 h-5\" fill=\"currentColor\" viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\">\n <path fillRule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414L9 12.586l4.293 4.293a1 1 0 001.414 1.414L10 11.414l4.293 4.293a1 1 0 001.414-1.414L11.414 10l4.293-4.293a1 1 0 00-1.414-1.414L10 8.586 6.293 4.293a1 1 0 00-1.414 1.414L8.586 10l-4.293 4.293a1 1 0 001.414 1.414L9 12.586l4.293 4.293a1 1 0 001.414-1.414L11.414 10 13.707 5.707a1 1 0 00-1.414-1.414L10 8.586 6.293 4.293a1 1 0 00-1.414 1.414L8.586 10l-4.293 4.293a1 1 0 001.414 1.414L9 12.586l4.293 4.293a1 1 0 001.414-1.414L11.414 10 13.707 5.707a1 1 0 00-1.414-1.414z\" clipRule=\"evenodd\"></path>\n </svg>\n <div className=\"ml-3 text-sm font-medium\">\n {message}\n </div>\n <button\n type=\"button\"\n className=\"ml-auto -mx-1.5 -my-1.5 bg-green-50 text-green-500 rounded-lg focus:ring-2 focus:ring-green-400 p-1.5 hover:bg-green-200 inline-flex h-8 w-8 transition-colors\"\n onClick={onClose}\n >\n <span className=\"sr-only\">Close</span>\n <svg className=\"w-5 h-5\" fill=\"currentColor\" viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\">\n <path fillRule=\"evenodd\" d=\"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 11-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 11-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z\" clipRule=\"evenodd\"></path>\n </svg>\n </button>\n </div>\n );\n};\n\nexport default SuccessNotification;",
"metadata": {"category": "state_ui", "framework": "react", "complexity": "medium"}
},
{
"instruction": "Implement a custom `ToggleSwitch` component using React and Tailwind CSS. It should accept an `isOn` prop and an `onToggle` callback. The switch should animate smoothly between states.",
"input": "",
"output": "import React from 'react';\n\nconst ToggleSwitch = ({ isOn, onToggle, label }) => {\n return (\n <div className=\"flex items-center justify-between p-2\">\n {label && <span className=\"text-sm font-medium text-gray-700\">{label}</span>}\n <button\n type=\"button\"\n onClick={onToggle}\n className={`${isOn ? 'bg-blue-600' : 'bg-gray-200'} relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-offset-2`}\n >\n <span\n aria-hidden=\"true\"\n className={`${isOn ? 'translate-x-5' : 'translate-x-0'} pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out`}\n />\n </button>\n </div>\n );\n};\n\nexport default ToggleSwitch;",
"metadata": {"category": "state_ui", "framework": "react", "complexity": "low"}
}
]
file_path = os.path.expanduser('~/projects/web-dev-swarm/datasets/frontend/raw/frontend_gold_standard.jsonl')
with open(file_path, 'a') as f:
for entry in data:
f.write(json.dumps(entry) + '\\n')
print(f'Successfully appended {len(data)} entries to {file_path}')