function MainComponent() { const [location, setLocation] = React.useState(""); const [service, setService] = React.useState(""); const [results, setResults] = React.useState([]); const tableHeaders = [ "店舗名", "電話番号", "住所", "営業時間" ]; const handleSearch = async ()=>{ const query = `${service} near ${location}`; const response = await fetch(`/integrations/local-business-data/search?query=${encodeURIComponent(query)}&limit=100`, { method: 'GET' }); const data = await response.json(); const formattedResults = data.data.map((business)=>({ name: business.name, phone: business.phone_number || "N/A", address: business.full_address || "N/A", hours: business.working_hours || "N/A" })); setResults(formattedResults); }; const handleCSVExport = ()=>{ const csvHeaders = [ "店舗名", "電話番号", "住所", "営業時間" ]; const csvRows = results.map((result)=>`${result.name},${result.phone},${result.address},${result.hours}`); const csvContent = [ csvHeaders.join(","), ...csvRows ].join("\n"); const blob = new Blob([ csvContent ], { type: 'text/csv' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = 'search_results.csv'; document.body.appendChild(a); a.click(); document.body.removeChild(a); }; return /*#__PURE__*/ React.createElement("div", { className: "max-w-[800px] mx-auto p-4 font-sans", __source: { fileName: "", lineNumber: 37, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 38, columnNumber: 7 }, __self: this }, "Google マップ検索ツール"), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-lg mb-2", htmlFor: "location", __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, "地名"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "location", name: "location", className: "w-full p-2 border border-gray-300 rounded", placeholder: "例: 東京", value: location, onChange: (e)=>setLocation(e.target.value), __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 51, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-lg mb-2", htmlFor: "service", __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }, "サービス名"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "service", name: "service", className: "w-full p-2 border border-gray-300 rounded", placeholder: "例: レストラン", value: service, onChange: (e)=>setService(e.target.value), __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "w-full py-2 px-4 bg-blue-500 text-white rounded hover:bg-blue-600", onClick: handleSearch, __source: { fileName: "", lineNumber: 63, columnNumber: 7 }, __self: this }, "検索"), /*#__PURE__*/ React.createElement("div", { className: "mt-6", __source: { fileName: "", lineNumber: 70, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-4", __source: { fileName: "", lineNumber: 71, columnNumber: 9 }, __self: this }, "検索結果"), /*#__PURE__*/ React.createElement("table", { className: "w-full border-collapse", __source: { fileName: "", lineNumber: 72, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { __source: { fileName: "", lineNumber: 73, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 74, columnNumber: 13 }, __self: this }, tableHeaders.map((header)=>/*#__PURE__*/ React.createElement("th", { key: header, className: "border p-2 text-left bg-gray-200", __source: { fileName: "", lineNumber: 76, columnNumber: 17 }, __self: this }, header)))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 80, columnNumber: 11 }, __self: this }, results.map((result, index)=>/*#__PURE__*/ React.createElement("tr", { key: index, __source: { fileName: "", lineNumber: 82, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "border p-2", __source: { fileName: "", lineNumber: 83, columnNumber: 17 }, __self: this }, result.name), /*#__PURE__*/ React.createElement("td", { className: "border p-2", __source: { fileName: "", lineNumber: 84, columnNumber: 17 }, __self: this }, result.phone), /*#__PURE__*/ React.createElement("td", { className: "border p-2", __source: { fileName: "", lineNumber: 85, columnNumber: 17 }, __self: this }, result.address), /*#__PURE__*/ React.createElement("td", { className: "border p-2", __source: { fileName: "", lineNumber: 86, columnNumber: 17 }, __self: this }, result.hours)))))), /*#__PURE__*/ React.createElement("button", { className: "w-full mt-4 py-2 px-4 bg-green-500 text-white rounded hover:bg-green-600", onClick: handleCSVExport, __source: { fileName: "", lineNumber: 93, columnNumber: 7 }, __self: this }, "CSVで出力")); }