function MainComponent() { const [location, setLocation] = React.useState(''); const [service, setService] = React.useState(''); const [results, setResults] = React.useState([]); const handleSearch = async ()=>{ const response = await fetch(`/integrations/local-business-data/search?query=${service}+near+${location}&limit=100`, { method: 'GET' }); const data = await response.json(); if (data.status === "OK") { const businesses = data.data.map((b)=>({ name: b.name, phone: b.phone_number })); setResults(businesses); } }; const downloadCSV = ()=>{ const csvContent = "data:text/csv;charset=utf-8," + results.map((e)=>`${e.name},${e.phone}`).join("\n"); const encodedUri = encodeURI(csvContent); const link = document.createElement("a"); link.setAttribute("href", encodedUri); link.setAttribute("download", "search_results.csv"); document.body.appendChild(link); link.click(); document.body.removeChild(link); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center p-4 space-y-4 w-full", __source: { fileName: "", lineNumber: 32, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-roboto text-2xl text-center", __source: { fileName: "", lineNumber: 33, columnNumber: 7 }, __self: this }, "検索ツール"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col space-y-4 w-full max-w-[400px]", __source: { fileName: "", lineNumber: 34, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "location", value: location, onChange: (e)=>setLocation(e.target.value), placeholder: "地名を入力", className: "p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500", __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", name: "service", value: service, onChange: (e)=>setService(e.target.value), placeholder: "サービス名を入力", className: "p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500", __source: { fileName: "", lineNumber: 43, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleSearch, className: "p-2 bg-blue-600 text-white font-roboto rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-600", __source: { fileName: "", lineNumber: 51, columnNumber: 9 }, __self: this }, "検索")), /*#__PURE__*/ React.createElement("div", { className: "mt-4 w-full max-w-[600px]", __source: { fileName: "", lineNumber: 58, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { className: "list-disc list-inside bg-white p-4 rounded-md shadow-md", __source: { fileName: "", lineNumber: 59, columnNumber: 9 }, __self: this }, results.map((result, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "font-crimson-text", __source: { fileName: "", lineNumber: 61, columnNumber: 13 }, __self: this }, result.name, ", ", result.phone)))), /*#__PURE__*/ React.createElement("button", { onClick: downloadCSV, className: "p-2 mt-4 bg-green-600 text-white font-roboto rounded-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-600", __source: { fileName: "", lineNumber: 65, columnNumber: 7 }, __self: this }, "CSVダウンロード")); }