function NewComponent({ loading = false }) { const buttonText = loading ? '検索中...' : '検索'; const disabled = loading; return /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-blue-500 text-white p-2 rounded", disabled: disabled, __source: { fileName: "", lineNumber: 6, columnNumber: 5 }, __self: this }, buttonText); } function NewComponentStory() { return /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 18, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(NewComponent, { loading: false, __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(NewComponent, { loading: true, __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this })); } function MainComponent() { const [modelNumber, setModelNumber] = React.useState(''); const [result, setResult] = React.useState(null); const [loading, setLoading] = React.useState(false); const [error, setError] = React.useState(null); const handleSubmit = async (e)=>{ e.preventDefault(); setLoading(true); setError(null); try { const response = await fetch(`/integrations/google-search/search?q=${encodeURIComponent(modelNumber)}+FA機器`); const data = await response.json(); if (data.status === 'success' && data.items.length > 0) { const firstResult = data.items[0]; const result = { manufacturer: extractManufacturer(firstResult.snippet), productName: firstResult.title, productUrl: firstResult.link }; setResult(result); } else { setError('検索結果が見つかりませんでした。'); } } catch (error) { setError('検索中にエラーが発生しました。'); } setLoading(false); }; const extractManufacturer = (snippet)=>{ const manufacturerNames = [ 'オムロン', '三菱電機', 'キーエンス', 'パナソニック', 'シーメンス', 'ファナック' ]; for (const name of manufacturerNames){ if (snippet.includes(name)) { return name; } } return '不明'; }; const copyToClipboard = ()=>{ if (result) { const textToCopy = `メーカー: ${result.manufacturer}\n品名: ${result.productName}\n製品URL: ${result.productUrl}`; navigator.clipboard.writeText(textToCopy); } }; return /*#__PURE__*/ React.createElement("div", { className: "container mx-auto p-4 font-sans", __source: { fileName: "", lineNumber: 49, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 50, columnNumber: 7 }, __self: this }, "FA機器検索"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "mb-4", __source: { fileName: "", lineNumber: 51, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "modelNumber", value: modelNumber, onChange: (e)=>setModelNumber(e.target.value), placeholder: "型式を入力してください", className: "border p-2 mr-2", __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement(NewComponent, { loading: loading, __source: { fileName: "", lineNumber: 60, columnNumber: 9 }, __self: this })), error && /*#__PURE__*/ React.createElement("p", { className: "text-red-500 mb-4", __source: { fileName: "", lineNumber: 62, columnNumber: 17 }, __self: this }, error), result && /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 64, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("table", { className: "w-full border-collapse border", __source: { fileName: "", lineNumber: 65, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { __source: { fileName: "", lineNumber: 66, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { className: "bg-gray-200", __source: { fileName: "", lineNumber: 67, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "border p-2", __source: { fileName: "", lineNumber: 68, columnNumber: 17 }, __self: this }, "項目"), /*#__PURE__*/ React.createElement("th", { className: "border p-2", __source: { fileName: "", lineNumber: 69, columnNumber: 17 }, __self: this }, "情報"))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 72, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 73, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "border p-2", __source: { fileName: "", lineNumber: 74, columnNumber: 17 }, __self: this }, "メーカー"), /*#__PURE__*/ React.createElement("td", { className: "border p-2", __source: { fileName: "", lineNumber: 75, columnNumber: 17 }, __self: this }, result.manufacturer)), /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 77, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "border p-2", __source: { fileName: "", lineNumber: 78, columnNumber: 17 }, __self: this }, "品名"), /*#__PURE__*/ React.createElement("td", { className: "border p-2", __source: { fileName: "", lineNumber: 79, columnNumber: 17 }, __self: this }, result.productName)), /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 81, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "border p-2", __source: { fileName: "", lineNumber: 82, columnNumber: 17 }, __self: this }, "製品URL"), /*#__PURE__*/ React.createElement("td", { className: "border p-2", __source: { fileName: "", lineNumber: 83, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: result.productUrl, target: "_blank", rel: "noopener noreferrer", className: "text-blue-500 hover:underline", __source: { fileName: "", lineNumber: 84, columnNumber: 19 }, __self: this }, result.productUrl))))), /*#__PURE__*/ React.createElement("button", { onClick: copyToClipboard, className: "mt-4 bg-green-500 text-white p-2 rounded", __source: { fileName: "", lineNumber: 91, columnNumber: 11 }, __self: this }, "結果をコピー"))); }