function MainComponent() { const [location, setLocation] = React.useState(""); const [service, setService] = React.useState(""); const [predictions, setPredictions] = React.useState([]); const [results, setResults] = React.useState([]); const handleLocationInput = async (e)=>{ setLocation(e.target.value); if (e.target.value.length > 0) { const response = await fetch(`/integrations/google-place-autocomplete/autocomplete/json?input=${e.target.value}&radius=500`); const data = await response.json(); setPredictions(data.predictions); } else { setPredictions([]); } }; const handleSearch = async ()=>{ const query = `${service}+in+${location}`; const response = await fetch(`/integrations/local-business-data/search?query=${query}&limit=100`); const data = await response.json(); setResults(data.data); }; const handleCSVDownload = ()=>{ const csvContent = "data:text/csv;charset=utf-8," + results.map((e)=>`${e.name},${e.phone_number},${e.full_address},${e.working_hours || "N/A"},${e.review_count},${e.rating}`).join("\n"); const encodedUri = encodeURI(csvContent); const link = document.createElement("a"); link.setAttribute("href", encodedUri); link.setAttribute("download", "results.csv"); document.body.appendChild(link); link.click(); document.body.removeChild(link); }; return /*#__PURE__*/ React.createElement("div", { className: "w-full p-4 font-roboto", __source: { fileName: "", lineNumber: 44, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 45, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "location", value: location, onChange: handleLocationInput, className: "w-full p-2 mb-2 border border-gray-300 rounded", placeholder: "地名を入力", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }), predictions.length > 0 && /*#__PURE__*/ React.createElement("ul", { className: "absolute bg-white border border-gray-300 rounded w-full mt-1 z-10", __source: { fileName: "", lineNumber: 56, columnNumber: 13 }, __self: this }, predictions.map((prediction)=>/*#__PURE__*/ React.createElement("li", { key: prediction.place_id, className: "p-2 hover:bg-gray-200 cursor-pointer", onClick: ()=>{ setLocation(prediction.description); setPredictions([]); }, __source: { fileName: "", lineNumber: 58, columnNumber: 17 }, __self: this }, prediction.description)))), /*#__PURE__*/ React.createElement("input", { type: "text", name: "service", value: service, onChange: (e)=>setService(e.target.value), className: "w-full p-2 border border-gray-300 rounded", placeholder: "サービス名を入力", __source: { fileName: "", lineNumber: 72, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 81, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleSearch, className: "w-full p-2 bg-blue-500 text-white rounded", __source: { fileName: "", lineNumber: 82, columnNumber: 9 }, __self: this }, "検索")), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 89, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { className: "list-disc pl-5", __source: { fileName: "", lineNumber: 90, columnNumber: 9 }, __self: this }, results.map((result)=>/*#__PURE__*/ React.createElement("li", { key: result.business_id, __source: { fileName: "", lineNumber: 92, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("strong", { __source: { fileName: "", lineNumber: 93, columnNumber: 15 }, __self: this }, "店舗名:"), " ", result.name, /*#__PURE__*/ React.createElement("br", { __source: { fileName: "", lineNumber: 93, columnNumber: 50 }, __self: this }), /*#__PURE__*/ React.createElement("strong", { __source: { fileName: "", lineNumber: 94, columnNumber: 15 }, __self: this }, "電話番号:"), " ", result.phone_number, /*#__PURE__*/ React.createElement("br", { __source: { fileName: "", lineNumber: 94, columnNumber: 59 }, __self: this }), /*#__PURE__*/ React.createElement("strong", { __source: { fileName: "", lineNumber: 95, columnNumber: 15 }, __self: this }, "住所:"), " ", result.full_address, /*#__PURE__*/ React.createElement("br", { __source: { fileName: "", lineNumber: 95, columnNumber: 57 }, __self: this }), /*#__PURE__*/ React.createElement("strong", { __source: { fileName: "", lineNumber: 96, columnNumber: 15 }, __self: this }, "営業時間:"), " ", result.working_hours || "N/A", /*#__PURE__*/ React.createElement("br", { __source: { fileName: "", lineNumber: 96, columnNumber: 69 }, __self: this }), /*#__PURE__*/ React.createElement("strong", { __source: { fileName: "", lineNumber: 97, columnNumber: 15 }, __self: this }, "口コミの数:"), " ", result.review_count, /*#__PURE__*/ React.createElement("br", { __source: { fileName: "", lineNumber: 97, columnNumber: 60 }, __self: this }), /*#__PURE__*/ React.createElement("strong", { __source: { fileName: "", lineNumber: 98, columnNumber: 15 }, __self: this }, "点数:"), " ", result.rating)))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 103, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleCSVDownload, className: "w-full p-2 bg-green-500 text-white rounded", __source: { fileName: "", lineNumber: 104, columnNumber: 9 }, __self: this }, "CSVファイルで出力"))); }