function MainComponent() { const [url1, setUrl1] = React.useState(''); const [url2, setUrl2] = React.useState(''); const [isLoading, setIsLoading] = React.useState(false); const [diffResult, setDiffResult] = React.useState(null); const handleUrlChange = (e)=>{ const { name, value } = e.target; if (name === "url1") setUrl1(value); if (name === "url2") setUrl2(value); }; const compareUrls = async ()=>{ setIsLoading(true); setDiffResult(null); // This is a placeholder for the logic to compare URLs // In a real-world scenario, this would likely involve calling an API that performs the visual regression testing const result = await new Promise((resolve)=>setTimeout(()=>resolve(Math.random() > 0.5 ? '相違あり' : '相違なし'), 2000)); setDiffResult(result); setIsLoading(false); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-gray-100 p-4", __source: { fileName: "", lineNumber: 24, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-roboto text-2xl mb-4 text-[#121212]", __source: { fileName: "", lineNumber: 25, columnNumber: 7 }, __self: this }, "ビジュアルリグレッションテスト"), /*#__PURE__*/ React.createElement("form", { className: "w-full max-w-md", onSubmit: (e)=>e.preventDefault(), __source: { fileName: "", lineNumber: 26, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "url1", className: "block mb-2 font-roboto text-md text-[#121212]", __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this }, "URL 1"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "url1", id: "url1", value: url1, onChange: handleUrlChange, placeholder: "https://example.com/page-1", className: "w-full p-3 text-md border rounded shadow-sm placeholder-gray-400 text-[#121212]", __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "url2", className: "block mb-2 font-roboto text-md text-[#121212]", __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this }, "URL 2"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "url2", id: "url2", value: url2, onChange: handleUrlChange, placeholder: "https://example.com/page-2", className: "w-full p-3 text-md border rounded shadow-sm placeholder-gray-400 text-[#121212]", __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "button", onClick: compareUrls, className: `w-full py-2 px-4 ${isLoading ? 'bg-gray-500' : 'bg-blue-500 hover:bg-blue-700'} text-white font-bold rounded`, __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this }, isLoading ? '比較中...' : '比較'), diffResult && /*#__PURE__*/ React.createElement("div", { className: "mt-4 text-center font-roboto text-lg text-[#121212]", __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this }, "結果：", diffResult))); }